javascript - 将 iframe src 从一个 html 页面传递到另一个

Question

我有两个 html 网页。一个页面有一个名为“iframe-content”的“div”。当我点击 div 时，它应该在第二个 html 页面中设置 iframe src。

第 1 页:

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

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

每当我点击“iframe-content”时，它应该打开html页面2，并且还应该按照我的意愿设置“native-iframe”源。

有什么有效的方法吗？

Answer 1

您可以将 url 作为查询参数发送，在 page2 上，您可以读取它并将其设置到 iframe。像这样的事情:

// 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);

注意:getParameterByName 只是一个从 URL 获取查询字符串参数的函数。我从 this 复制了这个函数Stackoverflow 问题，但还有许多其他解决方案可以完成此任务。