在iframe中获取子对象的实例

时间:2013-04-07 17:17:04

标签: javascript iframe

我需要自动化一个使用iframe嵌入子窗体的网络表单,这些表单可以被视为单独的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。我需要将文本发布到孩子的textarea(来自父母)。但问题是我还无法从父级访问子html对象。

3 个答案:

答案 0 :(得分:8)

如果您试图从父母那里获取数据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/

答案 1 :(得分:2)

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

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

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");
    }
}

答案 2 :(得分:0)

var 视场; // 是对 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");
}

}