Javascript 无法使用jQuery同时访问页面表单和iframe表单
我遇到了一个问题,我试图实例化一个从iframedom和pagedom中提取数据的对象 如果我构建页面并在本地运行它(没有iframe,因为由于跨原点限制,它无法工作),那么实例化对象和从页面DOM获取本地表单字段数组就不会有问题 为了获得iframe表单,我使用jQuery.content()方法,在加载iframe之后实例化对象。加载页面后,我可以毫无问题地获取iframe源表单字段,但之后我无法获取页面表单字段 加载iframe后,如何访问页面DOM和iframe DOM?以下是代码(缩写):Javascript 无法使用jQuery同时访问页面表单和iframe表单,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,我遇到了一个问题,我试图实例化一个从iframedom和pagedom中提取数据的对象 如果我构建页面并在本地运行它(没有iframe,因为由于跨原点限制,它无法工作),那么实例化对象和从页面DOM获取本地表单字段数组就不会有问题 为了获得iframe表单,我使用jQuery.content()方法,在加载iframe之后实例化对象。加载页面后,我可以毫无问题地获取iframe源表单字段,但之后我无法获取页面表单字段 加载iframe后,如何访问页面DOM和iframe DOM?以下是代码(缩写
字段1
字段2
提交
如果您在第二个框架中使用不同的域url,则无法从此iframe获取内容。因为“跨国”问题
请检查此链接
谢谢您的回复!是的,这段代码并不完全清楚——当我在服务器上托管页面时,iframe来自同一台服务器,因此这不是一个跨源问题——从页面调用它是可行的。从iframe嵌入的页面获取表单数据是有问题的。我只能得到一张或另一张表格。这很奇怪。我为这段代码准备了一个示例,请检查一下。
<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>