Change iframe from another page

Question

I want to be able to click a button on page1.html and then have a new page (such as portal.html) open up with an iframe with the URL specified in the iframe.

So, I want to have 2 pages. page1.html, and portal.html. The portal page would have an iframe on it, and I want the URL of that iframe to change based on what button I pressed on page1.html.

For example, page1.html would have 2 buttons, button1 and button2.

If I clicked button1, I would be sent to portal.html and have https://example.com in the iframe.
If I clicked button2, I would be sent to portal.html and have https://stackoverflow.com in the iframe.

Is this possible, and if it is how can I do it? I would prefer to do it without any server side code such as PHP if possible.

edit

I will have 5 pages.

index.html
portal.html
page1.html
page2.html
page3.html

Portal.html will have an iframe.

Index.html will have 3 buttons.

If I click button1, I want to load the page portal.html (in a new tab) but with page1.html in the iframe (on portal.html)
If I click button2 I want to load the page portal.html (in a new tab) but with page2.html in the iframe (on portal.html)
If I click button3 I want to load the page portal.html (in a new tab) but with page3.html in the iframe (on portal.html)

score 1 · Answer 1 · answered Feb 08 '21 at 20:10

1

This is easy to do by specifying the link target. For example, assume your iframe has a name like this:

<iframe name="main"></iframe>

Then, for your link, set the target:

<a href="page2.html" target="main">Page 2</a>

When the link is clicked, it will open inside the iframe, as designated by its target attribute.

You can find more information on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

answered Feb 08 '21 at 20:10

Brad

159,648
54
349
530

Thank you for the answer, it works well if I have both the button and the iframe in the same file. Is there a way to have it so I have the element in one file, and the iframe in another? Or is there something that I am missing? – TheRuntingMuumuu Feb 08 '21 at 21:53
I mean, you could always change the `a target` with jQuery, see: `$("#TheClass").attr("src", "https://example.com");` See my answer (the Alternatively section) for more details – TheTechRobo the Nerd Feb 08 '21 at 23:01
@TheRuntingMuumuu Show your code. I don't follow what you're asking. – Brad Feb 08 '21 at 23:32
When I put `` and `Page 2` in the same html file (portal.html) I can get this solution to work. But, when I try to put the `` in the portal.html file and `Page 2` in the other file (page2.html) I cannot get it to to work. – TheRuntingMuumuu Feb 08 '21 at 23:59
@TheRuntingMuumuu Where is `page2.html` loaded? If in that iframe, you don't need to specify a target at all, as links will open within that frame. – Brad Feb 09 '21 at 00:15
**This is the code that is in page2.html** Exanple Website **This is the code that is in portal.html** **Im looking to have it so when I am on the webpage page2.html, I can click on the example website link and it will open the webpage portal.html, with the website example.com in the iframe.** – TheRuntingMuumuu Feb 09 '21 at 00:28
@TheRuntingMuumuu So, what loads `page2.html`? Is `page2.html` not on `portal.html` in an iframe? It sounds like what you're saying is that you want to target a frame that doesn't exist yet, because the page isn't loaded yet, which of course you can't do. What you can do is load `portal.html` and have it load the frame with JavaScript, which is is what TheTechRobo is getting at. (You definitely don't need jQuery nor all this code for this.) Is that what you want? – Brad Feb 09 '21 at 01:22
I think that is what I want. Sorry if I was a bit confusing. Ill edit the main post to be less confusing. – TheRuntingMuumuu Feb 09 '21 at 14:02
@Brad you don't need jquery? I thought you can't modify attributes without it? – TheTechRobo the Nerd Feb 22 '21 at 15:44

TheTechRobo the Nerd · Answer 2 · 2021-04-05T15:10:29.540

If I'm understanding the question right, you can use JavaScript and query strings to do this.

<iframe name="ifrm" id="ifrm" src="javascript:void(0)">Failed to load iframe</iframe>
<script src="min.js"></script> <!--for older browsers, will offer support for queryString. Comes from https://raw.githubusercontent.com/ungap/url-search-params/master/min.js-->
<script>
  const urlParams = new URLSearchParams(window.location.search);
  console.log(urlParams);
  const site = urlParams.get('site');
  //https://www.sitepoint.com/get-url-parameters-with-javascript/
  open(site, "ifrm");
console.log("Everything successful");
  //https://stackoverflow.com/a/2930516/9654083 and https://stackoverflow.com/a/7551980/9654083
</script>

Then, you can use a URL like so: portal.html?site=https://example.com

score 0 · Answer 3 · edited Jul 23 '23 at 07:20

This can help without any back-end code.

The index.html seems not to be working on Stack Overflow, therefore, I would recommend you to test it somewhere else.

index.html

<!---html--->
<button onclick="window.open('portal.html?page1')">Open Page 1</button>
<button onclick="window.open('portal.html?page2')">Open Page 2</button>
<button onclick="window.open('portal.html?page3')">Open Page 3</button>

portal.html ↓

//JavaScript
window.onload=function() {
if (window.location.href.indexOf("page1") > -1) {
document.getElementById("custom").src = "https://example.com";
    }
//stackoverflow.com can not be opened in iframe
else if (window.location.href.indexOf("page2") > -1) {
document.getElementById("custom").src = "https://stackoverflow.com";
}
else if(window.location.href.indexOf("page3") > -1) {
document.getElementById("custom").src = "https://www.bing.com";
}
else {
alert("No web page to be loaded");
}};

/*CSS*/
body,div,html,#custom{margin:0;padding:0;height:100%}
#custom{display:block;width:100%;border:none}

<!---html--->
<iframe id="custom"></iframe>

Change iframe from another page

3 Answers3