Creating effective href anchors within an iframe using the `srcdoc` attribute

While loading some HTML content in an iframe using the srcdoc attribute, I encountered an issue where following anchor tag links inside the iframe caused the entire page to load within the iframe instead of scrolling to the linked id.

You can see a demonstration of this problem in this JSFiddle: https://jsfiddle.net/kzLdqjgs/5/

I managed to get the anchor tags working by using 

src="data:text/html,<p>my html</p>"
, but I am curious as to why it did not work with srcdoc. Additionally, it is worth noting that the src attribute has a character limit of 32,768 for some implementations, and the content I wanted to load was over 60k characters long (although it seems to work fine in Chrome).

javascripthtmlcssiframe

Answer №1

I came across the use of href="about:srcdoc#some_id in an iframe srcdoc, and it seems to work well in Chrome (I haven't tested it in other browsers yet).

According to Wikipedia:

about:srcdoc: This is a reserved URI in HTML5 that is not resolvable, meant for navigation within iframes with content specified in the srcdoc attribute.

Here's the link for more information

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to trigger a function in a separate component (Comp2) from the HTML of Comp1 using Angular 2

--- Component 1--------------- <div> <li><a href="#" (click)="getFactsCount()"> Instance 2 </a></li> However, the getFactsCount() function is located in another component. I am considering utilizing @output/emitter or some o ...

javascriptangulartypescriptangularjs-directive

How to retrieve the clicked value using jQuery within a jinja2 loop

I'm currently working on an app that utilizes a Flask backend and Jinja2 templating. Within the HTML, I have a loop set up to organize data into batches, creating three columns on the web page: {% for batch in df.iterrows() | batch(3) %} <d ...

javascriptjqueryhtml-listsjinja2

Angular textbox with dynamic concatenated name functionality

Hello, I'm currently working with some code that looks like this: <div *ngFor="let phone of phoneList; let phIndx = index;"> <div class="peoplePhoneTxtDiv"> <input [disabled]="phone.disabled" class="peoplePhoneTxtBox" type="text" ...

angularhtmltypescriptangular5

Having trouble getting card animations to slide down using React Spring

I am currently learning React and attempting to create a slide-down animation for my div element using react-spring. However, I am facing an issue where the slide-down effect is not functioning as expected even though I followed a tutorial for implementati ...

javascriptreactjsreact-spring

Firebug mistakenly detects phantom errors

<div id="video-player" data-src="http://www.youtube.com/embed..."></div> Inspect Element - Browser Developer Tools: Error: Access to property 'toString' denied I scanned the entire page (Ctrl+F) and could not find any reference t ...

javascripthtmlfirebug

How to change the padding of a parent element in CSS3?

I've created a circle-shaped div element using the following code: #circle{ width: 320px; height: 320px; background-image: url('image.jpg'); border-radius: 50%; background-position: 50% 50%; transition: all 1s; } This circle expands on hov ...

htmlcss

Can a function be called when using ng-options with AngularJS select?

Here is some HTML code <select ng-model="selectedMarker" ng-options="shape.text for shape in Selects('shapes')"> </select> And below is the JavaScript code angular.module('todo', ['ionic']) . ...

javascriptjqueryangularjsangularjs-scopeangularjs-service

Compiling this HTML template in dev mode with Vue is agonizingly slow

I've been working with a template app setup that was bootstrapped using vue CLI. Within one of my components, I have 20 nested div tags. During development mode, it's taking roughly 10 seconds to compile this component. The more deeply I nest HTM ...

javascriptvue.jsvuejs2vue-component

The persistent issue of window.history.pushstate repeatedly pushing the identical value

I need some assistance with my Vue application. I am trying to update the URL when a user clicks on an element: const updateURL = (id: string) => { window.history.pushState({}, '', `email/${id}`); }; The issue I'm facing is th ...

javascriptvue.jsvuejs3vue-router

Using Flexbox for laying out content in both columns and rows

Hey there, I'm looking for a little help. It's been quite some time since I last built a website from scratch and I want to keep things simple this time around. I've used breakpoints before, but I'm curious if Flexbox could be a better ...

htmlcssflexboxmultiple-columns

Console not displaying array output

Context: Currently, I'm in the process of developing an application that utilizes AJAX to fetch PHP arrays encoded into JSON format for dynamically constructing tables. However, I've encountered an issue where despite having no compilation errors ...

javascriptphparraysjsonajax

Creating a search form in Bootstrap 4 that is centered and expands to full width only on small screens

I'm currently working with a bootstrap v.4 navbar that has 3 elements in it. I've managed to align the elements evenly so that the search bar is centered in the navbar. However, when it collapses it takes up the full width of the screen. Here is ...

htmlcsstwitter-bootstrap

Utilizing JavaScript Files Instead of NPM as a Library for Open Layers: A Step-by-Step Guide

I've been attempting to get Open Layers to function in my Eclipse web development environment, but I've encountered some challenges along the way. The setup instructions provided on the Open Layers website focus mainly on using npm. Nevertheless, ...

javascripthtmlnpmopenlayers

Increase the size of the class element when hovered over

I have assigned a class to the "next" and "previous" functions on my webpage, and I am interested in increasing their size on hover so that they take up more space and push the other elements aside. For example: When I hover over the NEXT button, I want i ...

htmlcsshovercss-transitions

Ways to incorporate onload animation into a Pie chart with billboard js

I am currently working on implementing a pie chart with animation using billboard js. However, I am facing difficulties in applying the onload animation. Can anyone provide guidance on how to achieve this? For reference, you can view an example of the des ...

javascripthtmlbillboard.js

What is preventing access to the global scope in this particular situation?

Recently, I encountered a problem where I was able to pass through the issue but couldn't fully grasp the concept behind it. If you run the code snippet provided, you'll see what's happening. Can someone clarify this for me? function fu ...

javascript

Passing predefined functions to asynchronous functions can be achieved by simply defining the

I am facing a challenge in passing a predefined function within an async function. The piece of code below is functioning flawlessly: async.auto({ getAccessToken: function (callback) { let x = { access_token: signToken({ userId: u ...

javascriptnode.jsasync.js

Based on the action taken, send specific data through AJAX - whether a form submission or a div click

There is a function called search, which can be triggered either by clicking on a div or submitting a form. When the div is clicked, the id of the div is sent as data in an AJAX call. However, if the form is submitted, I want to send the inputted data thr ...

javascriptjqueryhtmlajax

The express ratelimit message encountered an unanticipated token

I am currently implementing the express-rate-limit package to restrict requests made to my express API. My client-side is using Pug and everything seems to be functioning properly. However, whenever the rate limit is exceeded, I receive the expected POST: ...

javascriptnode.jsexpresspugrate-limiting

Using PHP and an HTML form to insert data into a MySQL database

I'm having an issue with inserting data into a MySQL database using PHP and an HTML form. After hitting submit, I receive a message stating that the item was inserted successfully. However, when I check phpMyAdmin, the table appears to be empty. The ...

phphtmlmysqlforms