0

I have two html webpages. One page has a 'div' named "iframe-content" . When I click on the div, it should set the iframe src in the second html page.

Page 1:

<div class="iframe-content" onclick="passIframe()">
     //div which should set the iframe src on the other page on clicking
</div>

Page 2:

<iframe src="about:blank" id="native-iframe" width="450" height="180"scrolling="no">
      //The iframe which should obtain the source from the first page 
</iframe>

Whenever I click the "iframe-content" ,it should open the html page 2 and it should also set the "native-iframe" source as I wish.

Is there any efficient way to do it?

It Assistors
  • 998
  • 2
  • 14
  • 29

2 Answers2

2

You can send the url as a query parameter and on page2, you can read and set it to the iframe. Something like this:

// Page1:
function passIframe() {
    var url = ""; // The url to pass
    window.location.href = "/page2.html?url=" + url;
}

// Page2:
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var src= getParameterByName("url");
$("iframe").attr("src", url);

Note: the getParameterByName is just a function to get the query string parameter from the URL. I copied this function from this Stackoverflow question, but there are many other solutions to do this task.

Community
  • 1
  • 1
laszlokiss88
  • 4,001
  • 3
  • 20
  • 26
0

YOu can set iframe src attribute to your desired url

$('iframe').attr('src', url)
Zohaib Ijaz
  • 21,926
  • 7
  • 38
  • 60