同域 iframe 的权限被拒绝答案

【问题标题】：Permission denied to same-domain iframe同域 iframe 的权限被拒绝
【发布时间】：2016-09-24 18:24:17
【问题描述】：

我一直在努力更新一些旧版软件。我们最近更新了我们系统中使用的几个早就应该更新的工具，随着这些更新，我们的 jQuery 和 AngularJS 工作库发生了变化。

我已经让我们的大部分代码与新的更新一起工作，但这一段已经让我困扰了很长一段时间。有人告诉我，这在更新之前效果很好，之后就停止了。我无法测试这种说法。

使用ng-import，我们引入如下代码：

<iframe id="uploadFrame" width="250" height="50" frameborder="0" ng-src="/store/client/productscripts/binderCreate/partials/upload.html?dealer={{dealer}}" name="uploadFrame" scrolling="no" marginwidth="0" marginheight="0">
</iframe>

相关文件如下所示：

<html><head>(snip)</head><body>
<form id="uploadForm" enctype="multipart/form-data" method="post" action="http://other.ourdomain.com/clientbinders/upload?dealer={{dealer}}">
<input id="uploadFileInput" type="file" name="uploadFile">
</form>
</body></html>

用户使用 iFrame 中的文件输入来上传他们的新图像。然后，一旦它被加载，我们在 iFrame 之外有一个按钮，用于触发 iFrame 的表单提交。这样，我们可以让用户上传他们的图片并立即看到结果，而无需重新加载整个表单。在添加了大量跟踪代码以尝试确定 javascript 所看到的内容，并尝试了几种不同的访问 iFrame DOM 的方法（.contentWindow.document、.contentDocument 等）之后，此代码如下所示：

function uploadFile(){
    var myIfrm = jQuery('#uploadFrame');
    console.log("TEST #uploadFrame");
    console.log(myIfrm);
    console.log(myIfrm.length);
    console.log("TEST #uploadFileInput");
    console.log(myIfrm.contents().find('#uploadFileInput')); // ERROR HAPPENS HERE
    console.log(myIfrm.contents().find('#uploadFileInput').length);
    (snip:  lots more tracking code and eventually a .submit() )
}

我在指定行收到的错误是：

错误：访问属性“文档”的权限被拒绝

由于 iframe 引用的是同一域上的页面，我不明白为什么应该拒绝该权限。当然，问题是：为什么我访问该 DOM 的权限被拒绝？或者，我应该如何做才能让它发挥作用？

【问题讨论】：

是的，这是一种已知行为。
使用 iframe 时请记住 http://www.example.com != http://example.com
@PraveenKumar - 好的，那么已知的解决方案是什么？
@GeorgeLee - 是的，但我没有使用 www。一点也不。而且 iframe 没有引用域，它以斜杠开头并从那里继续 - 默认情况下，相同的域。
@PraveenKumar 搞定了。我不明白为什么，但我得到了它的工作。

标签： javascript jquery angularjs dom iframe

【解决方案1】：

对于 Iframe，您可以像这样设置域。你应该可以避免Error: Permission denied to access property "document"

  <script type="text/javascript">
        window.document.domain = "ourdomain.com";
    </script>

【讨论】：

试过了。没有帮助。这些不在不同的域上，将其输入到两个位置并引用同一个域并不能解决问题。

【解决方案2】：

我还没有弄清楚这里出了什么问题，但我得到了它的工作。不幸的是，这没有任何意义。

在程序的更高级别，使用 ng-import 导入了一个片段，如下所示：

ng-import="'client/productscripts/binderCreate/partials/'"

更新至：

ng-import="'/store/client/productscripts/binderCreate/partials/'"

它开始正常工作。该更改对 ng-import 是否有效没有任何影响。 ng-import 一直有效。但是在更高级别进行更改会导致此级别的代码突然开始工作。抱歉没有包含足够的问题 - 我从来没有想过似乎工作正常的更高级别的 ng-import 会以这种方式影响事情。

【讨论】：

是的……很奇怪。没有区别。