Question

使用纯 JavaScript/JQuery 对 iframe 进行后退和前进控制

2021-07-21

104

javascript html jquery iframe

我需要创建一个严格控制的环境来打开需要后退和前进导航控制的某些页面。我在这里四处搜索，发现了这个问题，并试图实现它，但遇到了问题。

我对 HTML 和 Javascript 有以下要求，假设它已经过样式设置（重用以前项目的代码），并且 JQuery 已在 <head></head> 标签中列出：

<body>
    <div id="header">
        <div id="shortcutbar">
            <a id="backBtn" onclick =="iframeBack();"></a>
            <a id="forwardBtn" onclick =="iframeForward();"></a>
        </div>
    </div>
    
    <div id="displayContainer">
        <iframe id="display" src="https://website.goes.here/">
        </iframe>
    </div>

    <script>
        function iframeBack() {
            $("#display").contentWindow.history.go(-1);
        }
        function iframeForward() {
            $("#display").contentWindow.history.go(1);
        }
    </script>
</body>

检查控制台，出现以下错误： Uncaught TypeError: Cannot read property "history" of undefined ，它给出了 HTML 中调用该函数的任何行，以及脚本标签中该函数本身的行。

我不知道哪里出了问题，因为到目前为止我发现的一切只是指我已经输入了。

Answer 1

jQuery 对象没有 contentWindow 属性。

您需要底层元素 ... $("#display")[0].contentWindow 。

话虽如此，如果 iframe 源与主页来自不同的来源，您将受到安全限制，无法使用 javascript 访问框架窗口

Answer 2

您还可以使用 postMessage 进行安全通信

$("#display").contentWindow.postMessage('back');

window.addEventListener('message', ({ data }) => {
  data === "back" && window.history.back()
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage