IFrame 中的 HTML 不允许 DOM 交互答案

【问题标题】：HTML within IFrame not allowing DOM interactionIFrame 中的 HTML 不允许 DOM 交互
【发布时间】：2011-07-23 02:05:33
【问题描述】：

我有一些使用 iFrame 的旧代码。代码在屏幕上显示正常，但是，当我尝试通过 javascript 操作某些元素时，它找不到它们。

例如它说 Table is NULL（但是，我正在屏幕上查看它）。

当 HTML 驻留在 iFrame 中时如何操作它？

更新： 我试过这个javascript代码：

alert(window.frames['iframe_layer1'].document.forms['pagectrls'].elements['ptObj_listbox2'].innerHTML);

我从 FireBug 收到以下错误： window.frames.iframe_layer1.document.forms.pagectrls.elements.ptObj_listbox2 未定义

这是 iFrame 的代码输出：

<div id="popcont_1" class="popupContainer" style="width: 740px; height: 520px; left: 507px; top: 0px; display: block; z-index: 97;">
<iframe id="iframe_layer1" style="width: 738px; display: block;" class="popupFrame" name="iframe_layer1" onload="top.iframeOnload();" src="default.asp?bn=0.7346613&amp;wpo=1&amp;p=1" frameborder="0" scrolling="no">
<html>

<div class="TabPanel" id="paneltab3" name="paneltab3" style="display: inline;"> <div class="colvis">55</div><div style="border: 1px solid rgb(136, 141, 119); position: absolute; width: 198px; z-index: 90; left: 147px; top: 8px; overflow: hidden;" id="ptObj_listbox1main"><div style="z-index: 95; background: none repeat scroll 0% 0% white; overflow-y: auto; overflow-x: hidden; width: 198px; height: 112px; position: relative;" id="ptObj_listbox1div"><table cellspacing="0" cellpadding="0" border="0" style="margin-top: 0px; width: 199px;" id="ptObj_listbox1"><tbody><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row0" lstindx="0" class="LUGridRowHighlight"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Personnel Management</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row1" lstindx="1" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Safety Management</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row2" lstindx="2" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">COBRA Administration</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row3" lstindx="3" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Training Course</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row4" lstindx="4" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Training Administration</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row5" lstindx="5" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Job Profile</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row6" lstindx="6" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Position Control</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row7" lstindx="7" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Requisition Tracking</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row8" lstindx="8" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Applicant Management</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row9" lstindx="9" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Contact Management</a></td></tr><tr ondblclick="lbRowDblClick(this,1, &quot;&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row10" lstindx="10" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Survey</a></td></tr></tbody></table><table style="display: none;" id="ptObj_listbox1archetype"><tbody><tr onclick="lbRowClick(this,&quot;ptObj_listbox1&quot;, &quot;&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=1" id="ptObj_listbox1Row" lstindx="0" class="LUGridRow"><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)"></a></td></tr></tbody></table></div></div><!-- Listbox End -->

<div style="border: 1px solid rgb(136, 141, 119); position: absolute; width: 198px; z-index: 90; left: 147px; top: 127px; overflow: hidden;" id="ptObj_listbox2main"><div style="z-index: 95; background: none repeat scroll 0% 0% white; overflow-y: auto; overflow-x: hidden; width: 198px; height: 240px; position: relative;" id="ptObj_listbox2div"><table cellspacing="0" cellpadding="0" border="0" style="margin-top: 0px; width: 199px;" id="ptObj_listbox2"><tbody><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row0" lstindx="0" class="LUGridRowHighlight"><td ptcheck="true" style="width: 19px;" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Personal</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-1</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row1" lstindx="1" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Status</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-2</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row2" lstindx="2" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Compensation</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-3</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row3" lstindx="3" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Position History</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-4</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row4" lstindx="4" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Performance Appraisals</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-5</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row5" lstindx="5" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Benefits</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-6</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row6" lstindx="6" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Background</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-7</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row7" lstindx="7" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Medical/Wellness</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-8</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row8" lstindx="8" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Training/Competency</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-9</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row9" lstindx="9" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Attendance</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-10</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row10" lstindx="10" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Timesheet Information</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-11</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row11" lstindx="11" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">Payroll Information</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-12</a></td></tr><tr ondblclick="lbRowDblClick(this,2, &quot;0&quot;);" onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row12" lstindx="12" class="LUGridRow"><td ptcheck="true" class="LUGridCell"><div class="lbCheckTrue"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)">User Fields</a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)">EMP-13</a></td></tr></tbody></table><table style="display: none;" id="ptObj_listbox2archetype"><tbody><tr onclick="lbRowClick(this,&quot;ptObj_listbox2&quot;, &quot;0&quot;);" pturl="ajxcmd.asp?datactrl=&amp;xCmd=LSTRCLICK&amp;xLstNDX=2" id="ptObj_listbox2Row" lstindx="0" class="LUGridRow"><td ptcheck="false" style="width: 19px;" class="LUGridCell"><div class="lbCheckFalse"></div></td><td class="LUGridCell"><a class="dummyLinks" href="javascript:void(0)"></a></td><td class="ColVis"><a class="dummyLinks" href="javascript:void(0)"></a></td></tr></tbody></table></div></div><!-- Listbox End -->

<input type="button" onclick="btnClick(this, 'ListRowUp');" style="top: 127px; left: 360px; width: 60px; height: 24px;" value="Up" tabindex="-1" id="ptObj_bbutton1" class="ptbutton" pttype="b" ptlayndx="61" ptdisp="false" ptpopup=""><div class="colvis">62</div><input type="button" onclick="btnClick(this, 'ListRowDown');" style="top: 153px; left: 360px; width: 60px; height: 24px;" value="Down" tabindex="-1" id="ptObj_bbutton2" class="ptbutton" pttype="b" ptlayndx="62" ptdisp="false" ptpopup=""><div class="colvis">63</div></div>


</body></html>
    </iframe>
    </div>

【问题讨论】：

iframe 源是否属于不同的域？
如果您在父框架中工作，您应该能够。您有机会发布更多详细信息供我们查看吗？
您需要查看哪些细节？源不属于其他域。
看看this。
你的代码是什么样的？只知道你想做的事情并不能帮助我们了解你实际做的事情为什么会失败。

标签： javascript asp.net iframe

【解决方案1】：

所有现代浏览器都允许您调试代码并以交互方式执行 JavaScript。这在您的情况下很有用 - 在抛出异常时停止并开始减少您的语句直到它起作用。

在您的情况下，很可能缺少某些元素（即我在您的示例 HTML 中没有看到 FORM 标记）。

尝试以交互方式调试和执行语句，直到找到哪个失败：

window.frames['iframe_layer1']
window.frames['iframe_layer1'].document
window.frames['iframe_layer1'].document.forms['pagectrls']
window.frames['iframe_layer1'].document.forms['pagectrls'].innerHTML

【讨论】：

【解决方案2】：

尝试通过以下方式获取您的 iframe 和内容

var iframe_layer1 = document.getElementById('iframe_layer1');

iframe_layer1.contentWindow.document.forms['pagectrls'] ... // and so on

如果您知道元素的 id，那么您可以使用它来查找元素，而无需在此处使用表单，您可以访问您的表格

vat myTable = iframe_layer1.contentWindow.document.getElementById('ptObj_listbox2'); 警报（myTable .innerHTML）；

【讨论】：

【解决方案3】：

如果父窗口和IFRAME 内容是从不同的域传递的，您将无法使用javascript 来操作从其他域加载的DOM 内容。这是现代浏览器的一项安全功能，称为同源策略。

【讨论】：

我不这么认为。因为它来自同一个域。不过还是谢谢。