无法使用 jQuery 访问页面表单和 iframe 表单

Question

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

如果我构建页面并在本地运行它(没有 iframe，因为由于跨源限制，这不起作用(，则实例化对象并从页面 DOM 获取本地表单字段数组没有问题。

为了获取 iframe 表单，我使用 jQuery .content(( 方法，在 iframe 加载后实例化对象。加载页面后，我可以毫无问题地获取 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

如果您在第二个框架中使用不同的域 url，则无法从此 iframe 获取内容。因为"跨源"问题。

请查看此链接;

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