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

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

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

请检查此链接；

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