Question

我遇到了一个问题，我试图实例化一个从iframe DOM和页面DOM中提取数据的对象。

如果我构建页面并在本地运行（没有iframe，因为因为跨域限制而无法工作），实例化对象并从页面获取本地表单字段数组没有问题DOM。

要获取iframe表单，我通过在iframe加载后实例化对象来使用jQuery .content（）方法。页面加载后，我可以毫无问题地获取iframe源表单字段，但是我无法获取页面表单字段。

iframe加载后如何访问页面DOM和iframe DOM？这是代码（缩写）：

<form id="pageForm">
    <table>
    <tr>
        <td><label for="field1">Field1</label></td>
        <td><input type="text" name="field1" id="field1"></td>
    </tr>
    <tr>
        <td><label for="field2">Field2</label></td>
        <td><input type="text" name="field2" id="field2"></td>
    </tr>
    </table>
</form>
<button type="submit" id="pageSubmit">Submit</button>

<!--local iframe -- [pageFields] is populated, but [iframeFields] is not (expected because of cross-origin)-->
<iframe id="formIFrame"></iframe>

<!--server iframe -- [iframeFields] form is populated, but [pageFields] is not-->
<iframe id="formIFrame" src="<!--URL goes here-->"></iframe>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>

    function FormManager(iframeDOM,iframeForm,pageForm){
        this.pageFields = $(pageForm).serializeArray();
        this.iframeFields = $(iframeDOM).contents().find(iframeForm).serializeArray();
    }

    //[pageFields] is populated, but [iframeFields] is not (expected because of cross-origin)
    const formManager1 = new FormManager('iframe#formIFrame','form#aspnetForm','form#pageForm');
    console.log(formManager1);
    debugger;

    //[iframeFields] form is populated, but [pageFields] is not
    document.getElementById('formIFrame').onload = function () {
        console.log('iframe is loaded');
        const formManager2 = new FormManager('iframe#formIFrame','form#aspnetForm','form#pageForm');
        console.log(formManager2);
        debugger;
    };

</script>

非常感谢任何帮助，我的智慧结束了这一点。

谢谢！

Answer 1

如果您在第二帧中使用不同的域网址，则无法从此iframe中获取内容。因为＆＃34;交叉起源＆＃34;的问题。

请检查此链接;

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

无法使用jQuery

1 个答案: