我很难弄清楚如何从外部页面访问加载到 iframe 中的页面。两个页面都是本地文件,我使用的是 Chrome。
我有一个外页和许多内页。外部页面应该始终显示内部页面的页面标题(这在我的应用程序中是有意义的,在这个精简的示例中可能不那么有意义)。这在 AppJS 中没有任何问题,但我被要求让这个应用程序直接在浏览器中工作。我收到错误“阻止源为“null”的帧访问源为“null”的帧。协议、域和端口必须匹配。 “。
我认为这是由于 Chrome 对本地文件的同源策略,但这并没有帮助我直接解决问题。我可以通过使用 window.postMessage 方法来解决这个精简示例中的问题,以规避同源策略。然而,除了这个例子之外,我还想从外部页面操作内部页面的 DOM,因为这将使我的代码更清晰 - 所以发布消息并不能完全完成这项工作。
外页
<!DOCTYPE html>
<html>
<head>
<meta name="viewport">
</head>
<body>
This text is in the outer page
<iframe src="html/Home.html" seamless id="PageContent_Iframe"></iframe>
<script src="./js/LoadNewPage.js"></script>
</body>
</html>
内页
<!DOCTYPE html>
<html>
<head>
<title id="Page_Title">Home</title>
<meta name="viewport">
</head>
<body>
This text is in the inner page
</body>
</html>
JavaScript
var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow;
var pageTitleElement = iFrameWindow.$("#Page_Title");
Per当 iFrame 从本地 html 文件加载本地 html 文件时,Chrome 的未来版本是否可能支持 contentWindow/contentDocument?,我尝试使用标志启动 Chrome
--allow-file-access-from-files
但结果没有任何变化。
Per Disable same origin policy in Chrome,我尝试使用标志启动 Chrome
--disable-web-security
但是,结果再次没有变化。
根据document.domain = document.domain 做什么?,我让两个页面都运行命令
document.domain = document.domain;
这导致了错误“阻止了来源为“null”的框架访问来源为“null”的框架。请求访问的框架将“document.domain”设置为“”,但正在访问的框架没有。两者都必须设置“ document.domain" 设置为相同的值以允许访问。 "
为了好玩,我让两个页面都运行命令
document.domain = "foo.com";
这导致了错误“ Uncaught Error: SecurityError: DOM Exception 18 ”。
我在挣扎。任何知识渊博的人的帮助都会很棒!谢谢!