在 iframe 中获取子对象的实例答案

【问题标题】：Get instance of child object in iframe在 iframe 中获取子对象的实例
【发布时间】：2013-03-29 17:19:15
【问题描述】：

我需要自动化一个使用 iframe 嵌入子“表单”的 Web 表单，这些子“表单”可以被视为单独的 html 页面。

因此，您会得到一个父文档，其中包含他们称为 iframe 的视图字段。 iframe 内是“子”嵌入网页。

一个简单的例子：

我已经从 html 中删减了很多以将其缩小到合理的大小

<html>
<body>
  <div id="123" arid=123 artype="View" ardbn="vfMyChild" 
  class="arfid123 ardbnvfMyChild" 
STYLE="top:49 left:75 width:1038 height:322" arvfframe="&lt;iframe style=&quot;top:0 left:0 width:1038; height:322&quot name=&quot;VF123&quot;  title=&quot;View Field&quot; src=&quot;javascript:&amp;quot&#59;&amp;lt&#59;HTML&amp;gt&#59;&amp;lt&#59;/HTML&amp;gt&#59;&amp;quot&#59;&quot; &gt;
&lt;/iframe&gt;">
</div>

</body>
</html>

那么嵌入的子html可以像这样简单：

<html>
<body>
<div id="321" arid=321 artype="Char" ardbn="txtRegister">
   <label id="label321" class="label f6">Register:</label>
   <textarea id="arid_321" cols="20" maxlen=255 rows=1></textarea>
</div>
</body>
</html>

STYLE= 中包含的 html 看起来有点奇怪 - 不知道为什么会这样。但我可以看到它有点像 iframe。

我有一个顶级文档对象的实例，我有一个 id=123 的 div 实例。我需要自动化孩子中的 textarea 对象。我尝试了以下方法，但没有成功。

var viewfields;  //is a ref to the div with id=123

if(viewfields) {
     window.alert("viewfields.length=" + viewfields.length);  //prints len=1 as expected
     // line below get Caught exception: Unable to get value of the 
     // property 'document': object is null or undefined
     var innerDoc = viewfields[0].contentDocument || viewfields[0].contentWindow.document;
     if(innerDoc) {
           window.alert("Wohoo we have an innerDoc");
     }
} else
      window.alert("no view fields found");

我正在使用 IE9 进行测试。

我能否使用此 html 获取内部网页的实例？如果有，怎么做？

编辑

如果有帮助，这里是相关 div 的实际未经编辑的 html。

<div id="WIN_0_536870915" arid=536870915 artype="View" ardbn="vfCubaChildren"  class="arfid536870915 ardbnvfCubaChildren" STYLE="top:49&#59; left:75&#59; width:1038&#59;  height:322&#59;z-index:1001&#59;background-color:transparent&#59;" arvfframe="&lt;iframe  style=&quot;top:0&amp;#59&#59; left:0&amp;#59&#59; width:1038&amp;#59&#59;  height:322&amp;#59&#59;background-color: transparent&amp;#59&#59;&quot;  name=&quot;VF536870915&quot; frameborder=1 scrolling=&quot;auto&quot;  allowtransparency=&quot;true&quot; title=&quot;View Field&quot;  src=&quot;javascript:&amp;quot&#59;&amp;lt&#59;HTML&amp;gt&#59;&amp;lt&#59;/HTML&amp;gt&#59    ;&amp;quot&#59;&quot; onload=&quot;DVFol&amp;#40&#59;&amp;#41&#59;&quot;&gt;
&lt;/iframe&gt;">
</div>

该 div 包含子窗体。子窗体就像另一个 html 网页。它具有标准的 html 输入字段和 textarea。我需要将文本发布到孩子（来自父母）的文本区域。但问题是我还不能从父级访问子 html 对象。

【问题讨论】：

我可能不知道您在使用什么，但指定的 arid、artype、ardbn 和 arvfframe 元素属性是什么？
我以为你说 viewfields 是 iframe 中的 div，但你把它当作数组对待？此外，它不应该影响您的代码，但您在某些属性上缺少引号。
@Jesse arid 等是 Web 应用程序使用的自定义属性。如果有帮助，网络应用是 BMC Remedy。
@user619818 是否要在arvfframe 属性内的标记之外构造一个iframe？然后访问其中的子对象？
@Jesse，我可以访问父 iframe（包含子） - 但我似乎无法访问里面的子对象。不幸的是，做模型很困难。

标签： javascript iframe

【解决方案1】：

var viewfields; //是 id=123 的 div 的引用`

如果（视野）{ window.alert("viewfields.length=" + viewfields.length); //按预期打印 len=1

// Check if iframe loading is complete, attach rest of code to onload event 
if (viewfields[0].addEventListener){ // for Mozilla, FF, Chrome, etc...
    viewfields[0].addEventListener("onload",AfterFrameLoads());
}
else if (viewfields[0].attachEvent){ // for IE and Opera
    viewfields[0].attachEvent("onload",AfterFrameLoads());
}

}

// 在 iframe 加载后尝试访问文档。

函数 AfterFrameLoads(){
var innerDoc = viewfields[0].contentDocument || viewfields[0].contentWindow.document;

 if(innerDoc) {
       window.alert("Wohoo we have an innerDoc");
 }
else {
  window.alert("no view fields found");
}

}

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。一个适当的解释将通过展示为什么这是解决问题的好方法来极大地提高其长期价值，并使其对有其他类似问题的未来读者更有用。请编辑您的答案以添加一些解释，包括您所做的假设

【解决方案2】：

如果您尝试从查看iframe 的父级获取数据，那么这就是您要查找的内容。请记住，这仅适用于 iframe 源是来自同一域的页面，否则您将无权访问其内容。

http://jsfiddle.net/wao20/Ja54y/19/

首先确保您的iframe 已加载，然后您可以调用它来访问您的iframe dom。

$('#iframe_id_123').contents().find('#element_inside_your_iframe');

更新：

如果你想要一个纯 js 的解决方案，你可以试试这个：

var f = document.getElementById('f123');
if (f != undefined){
    var doc = f.contentDocument || f.contentWindow.document;
    var txt = doc.getElementById('secret');
    alert(txt.value);
}
else {
    alert('No iframe, no secret!');
}

http://jsfiddle.net/wao20/Ja54y/34/

【讨论】：

如果我不使用 JQuery 会怎样？

【解决方案3】：

iframe 的内容可能未加载。您可以尝试检查 iframe 是否已加载，如果已加载，则尝试访问其文档元素。

例如，访问 iframe 的文档元素的代码被拆分为函数 AfterFrameLoads()，该函数在 iframe 的 onload 事件期间被调用。

var viewfields;  //is a ref to the div with id=123`

if(viewfields) {
    window.alert("viewfields.length=" +  viewfields.length);  //prints len=1 as expected

    // Check if iframe loading is complete, attach rest of code to onload event 
    if (viewfields[0].addEventListener){ // for Mozilla, FF, Chrome, etc...
        viewfields[0].addEventListener("onload",AfterFrameLoads());
    }
    else if (viewfields[0].attachEvent){ // for IE and Opera
        viewfields[0].attachEvent("onload",AfterFrameLoads());
    }
 }

// Attempt to access document after iframe loads.

function AfterFrameLoads(){   
     var innerDoc = viewfields[0].contentDocument || viewfields[0].contentWindow.document;       

     if(innerDoc) {
           window.alert("Wohoo we have an innerDoc");
     }
    else {
      window.alert("no view fields found");
    }
}

【讨论】：

我遇到的问题是访问内部文档。即 innerDoc 始终为 null - 调用函数以在所有内容加载后进行检查。 viewfields 不为空 - 但我的问题是获取 viewfields 的内容。
innerDoc 是否与具有视图域 div/iframe 的页面位于同一域中？当我测试此代码并尝试将 innerDoc 指向不同域上的 url 时，我得到 innerDoc 为空（没有文档对象），但有一个父窗口对象。
如果 iframe 的 src 位于不同的域中，则文档应该为 null，但我很好奇是否是这种情况。当我测试源代码时，如果 iframe 位于同一个域中，它就可以工作，但不适用于像 microsoft.com 这样的外部站点。参考：stackoverflow.com/questions/3999101/…
在我的测试中，内部文档是来自同一 Web 服务器的网页 - 它甚至是来自同一文件夹的文件。我将创建一个模型 html 并添加。