使用纯 JavaScript/JQuery 的 iframe 的前后控制

Question

我需要创建一个严格控制的环境来打开某些需要前后导航控件的页面。我在这里四处寻找并找到 this question 并尝试实施它，但我遇到了问题。

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

访问框架 window

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

使用纯 JavaScript/JQuery 的 iframe 的前后控制

Back and Forward Control for an iframe using pure JavaScript/JQuery

html

javascript

iframe

jquery