As you can see if you run the code snippet. You will see "openstreetmap" hyperlink.
If you click it. you will open a new document with a different URL path at the browser level. I want to get this new "URL" / "path" / document inside the iframe tag.
I have been trying to find a solution in many places. but it seems like an impossible mission!
can some brave guy, help me to do some magic in js / jquery. I was trying with sandbox attribute to prevent top navigation. but it feels like nothing is working.
Thanks!
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>The target of <a> should have the name of the <iframe>:
<p><a href="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik" target="map">Open map</a></p>
<iframe name="map"></iframe>You can also use JavaScript:
document.querySelector('a').addEventListener('click', e => {
e.preventDefault();
document.querySelector('iframe').src = e.target.href;
});<p><a href="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">Open map</a></p>
<iframe></iframe>