Change destination URL from within iframe

HTML & CSS
1

Hi all,

I have an iframe. I want all links within the iframe to open a to a new URL/domain in a new tab. All links can be the same URL.

Also clicking anywhere in the iframe can open the new tab to the destination URL.

We’ve been at this for days. Any ideas totally appreciated.

Thanks!

2

If you have no control over the page that’s loaded in the iframe, then you cannot redirect the links in that page. The click might look like it is done in your parent page, but it’s really happening in the site/page loaded in the iframe.

The one option I see for the moment is to overlay the iframe with a transparent layer that takes over the click. Then it will appear as a click in the iframe goes to the url you decide, as the overlaying box is on the iframe’s parent page.

Hope that can be an option.

3

As Erik said you could do something like this:

   <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,.body{margin:0;padding:0}
.overlay {
	position:relative;
	padding:35% 0 0;
}
.overlay iframe{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:1;
	border:none;
	width:100%;
	height:100%;
}
.ontop {
	position:absolute;
	left:0;
	top:0;
	right:20px;/* miss scrollbar*/
	bottom:20px;/* miss scrollbar*/
	z-index:2;
	text-decoration:none;
}
</style>
</head>

<body>
<div class="overlay">
  <iframe src="http://www.pmob.co.uk"></iframe>
  <a class="ontop" href="http://www.google.com"></a> </div>
</body>
</html>

If the site linked to in the iframe doesn’t belong to you then the site owner could have reason to be dismayed with the technique.

1 Like
4

Thank you for the replies.

We shall try this.

Site owner has given permissions.

Thanks all!

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.