从另一个页面更改 iframe

Question

我希望能够单击page1.html 上的按钮，然后打开一个新页面（例如portal.html），其中包含一个 iframe，该 iframe 的 URL 是在 iframe 中指定的。

所以，我想要 2 页。 page1.html 和 portal.html。门户页面上有一个 iframe，我希望该 iframe 的 URL 根据我在 page1.html 上按下的按钮进行更改。

例如，page1.html 将有 2 个按钮，button1 和 button2。

• 如果我单击 button1，我将被发送到 portal.html 并在 iframe 中显示https://example.com。
• 如果我点击按钮 2，我将被发送到 portal.html 并在 iframe 中显示https://stackoverflow.com。

这可能吗？如果可以，我该怎么做？如果可能的话，我宁愿在没有任何服务器端代码（如 PHP）的情况下这样做。

编辑

我将有 5 页。

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

Portal.html 将有一个 iframe。

Index.html 将有 3 个按钮。

• 如果我单击 button1，我想加载页面 portal.html（在新选项卡中）但在 iframe 中使用 page1.html（在 portal.html 上）
• 如果我单击 button2，我想加载页面 portal.html（在新选项卡中），但在 iframe 中使用 page2.html（在 portal.html 上）
• 如果我单击 button3，我想加载页面 portal.html（在新选项卡中），但在 iframe 中使用 page3.html（在 portal.html 上）

Answer 1

通过指定链接目标很容易做到这一点。例如，假设您的 iframe 具有这样的 name：

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

然后，为您的链接设置target：

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

当点击链接时，它将在 iframe 内打开，由其target 属性指定。

您可以在 MDN 上找到更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Answer 2

如果我对问题的理解正确，您可以使用 JavaScript 和查询字符串来执行此操作。

<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>

然后，您可以使用如下 URL：portal.html?site=https://example.com

Answer 3

这可以在没有任何后端代码的情况下提供帮助。

index.html 似乎不适用于 Stack Overflow，因此，我建议您在其他地方进行测试。

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 openned 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>