使用纯javascript/jquery对iframe进行前后控制

vu8f3i0k  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(634)

我需要创建一个严格控制的环境来打开某些需要前后导航控件的页面。我在这里摸索了一下,发现了这个问题,并试图实现它,但我遇到了一个问题。
对于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中调用函数的任何一行,以及脚本标记中函数本身的一行。
我对不起作用的东西感到茫然,因为到目前为止我发现的所有东西都是指我已经键入的内容的一些变体。

dgtucam1

dgtucam11#

jquery对象没有 contentWindow 财产。
您需要底层元素。。。 $("#display")[0].contentWindow .
也就是说,如果iframe源与主页的来源不同,那么您将受到安全限制,无法使用javascript访问框架窗口

m0rkklqb

m0rkklqb2#

您还可以使用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

相关问题