Question

我一直在努力更新一些传统软件。我们最近更新了我们系统中使用的几个长期更新的工具，随着这些更新，我们的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() )
}

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

错误：拒绝访问属性“document”的权限

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

Answer 1

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

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

Answer 2

我还没弄清楚这里出了什么问题，但是我确实做到了。不幸的是，没有任何意义。

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

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

更新为：

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

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

对同域iframe的权限被拒绝

2 个答案: