Question

我控制两个域并可以设置任何必要的策略。 iframe中的域使用了几乎相同的库，如果可能的话，我希望将它们从父级中删除。

要明确的是，我并没有询问如何提出跨域请求。当父母在另一个域上时，我问如何从iframe的父级获取脚本。

我收到了一个权限错误（在这里尝试jQuery，但与我的其他库一样）：

if (typeof(jQuery) == "undefined") {
  var iframebody = document.getElementsByTagName("body")[0];
  var jQuery = function (selector) { return parent.jQuery(selector, iframebody); };
  var $ = jQuery;
}
$("<h1>Hello World</h1>").appendTo("body");

如果它们位于同一个域中，则可以使用。

我知道这是跨域的，并且出于安全原因而被阻止，但考虑到我控制这两个域并且两者都不是安全敏感的，我可以将任何策略设置为我想要的松散。

可以这样做吗？

Answer 1

如果在两个页面中包含来自同一来源的js，它将只加载一次，但可以在两个站点上访问：

//parent/main.html
<script src="jquery.js"></script>
<iframe src="http://other/iframe.html"></iframe>
<script>
  $(document.body).html("wohoo");
</script>

//other/iframe.html
 <script src="http://parent/jquery.js"></script>
<script>
  $(document.body).html("wohoo");
</script>

因此，如果在iframe中访问它们，则脚本只会被加载一次，如果您在没有其他的情况下访问它们，它仍然可以正常工作。

Answer 2

您可以使用postMessage在帧及其父窗口之间来回传递信息。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

您必须运行代码来修改其所在域中的元素，但您可以在父级中设置一个帖子消息处理程序来启动它。

// child window (iframe content)
parent.postMessage("hi there", "https://parent.domain.here");


// parent window
window.addEventListener("message", function(message){
    $("<h1>"+message+"</h1>").appendTo("body");
});

我可以在另一个域

2 个答案: