时间戳

首页 > 解决方案 > 使用纯 JavaScript/JQuery 的 iframe 的后退和前进控制

javascript - 使用纯 JavaScript/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 中调用函数的任何行，以及脚本标记中函数本身的行。

我不知道什么不起作用，因为到目前为止我发现的所有内容都只是指我已经输入的内容的一些变体。

标签： javascripthtmljqueryiframe

解决方案

jQuery 对象没有contentWindow属性。

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

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

推荐阅读