使用纯 JavaScript/JQuery 的 iframe 的后退和前进控制
Posted
技术标签:
【中文标题】使用纯 JavaScript/JQuery 的 iframe 的后退和前进控制【英文标题】：Back and Forward Control for an iframe using pure JavaScript/JQuery 【发布时间】：2021-09-29 07:06:13 【问题描述】：我需要创建一个严格控制的环境来打开某些需要向后和向前导航控件的页面。我在这里四处寻找并找到了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 中调用函数的任何行，以及脚本标签中函数本身的行。
我不知道什么不起作用，因为到目前为止我发现的所有内容都只是指我已经输入的内容的一些变体。
【问题讨论】：
【参考方案1】：jQuery 对象没有contentWindow 属性。
您需要底层元素...$("#display")[0].contentWindow。
也就是说，如果 iframe 源来自与主页不同的来源，则您将受到安全限制，无法使用 javascript 访问框架窗口
【讨论】：
如果您在命令行参数中禁用网络安全，这是否也适用？ 从不诚实，这可能是个坏主意 对于一般用途，我同意，但这将在一个使用 Intranet 站点的严格监管的环境中，从不打算允许最终用户访问 Internet（我将设置一个单独的实例/会话chrome，因此它甚至无法与其他 chrome 浏览器一起使用）。因此，我为什么要制作自己的“UI”并在 iframe 中加载网页。至少，我读到的关于那种东西的内容让我相信我应该对这种设置没问题（无论如何，我对所有东西都使用应用程序模式，所以一开始就没有浏览器 chrome） 试一试，看看我能给出的所有建议 我得到了一个新的错误，详细说明blocked a frame with origin "null" from accessing a cross-origin frame. 我会把你的答案标记为答案，我会从这里开始修改。非常感谢！【参考方案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
【讨论】：
尝试这个，我收到以下错误：Cannot read property 'postMesage' of undefined at iframeBack 老实说，我不知道如何进一步解决这个问题......以上是关于使用纯 JavaScript/JQuery 的 iframe 的后退和前进控制的主要内容，如果未能解决你的问题，请参考以下文章
杂记整理一：javascript, jQuery 以及 ECMAscript
如何在 javascript/jquery 中发出 ajax 请求
试图在JavaScript / jQuery中添加一个on click事件