Javascript获取IFrame内容(兼容IE&FF)

最新推荐文章于 2024-04-19 11:04:27 发布

aaa333qwe

最新推荐文章于 2024-04-19 11:04:27 发布

阅读量5.3k

点赞数 1

分类专栏：前端技术问题解决 JavaScript学习目录

JavaScript学习目录同时被 2 个专栏收录

72 篇文章 1 订阅

订阅专栏

前端技术问题解决

56 篇文章 0 订阅

订阅专栏

在网上找到在IE下操作IFrame内容的代码:

document.frames[ "MyIFrame"].document.getElementById( "s").style.color= "blue";

但是这在Firefox下无效。
所以，想到在Firefox下用FireBug来调试。经过调试发现在Firefox下可用以下代码来实现:

document.getElementById( "MyIFrame").contentDocument.getElementById( "s").style.color= "blue";

详细代码如下:
TestIFrame.htm:

<html>
<head>
<script type= "text/javascript">
function f(){
         var doc;

         if (document.all){ //IE
                doc = document.frames[ "MyIFrame"].document;
        } else{ //Firefox
                doc = document.getElementById( "MyIFrame").contentDocument;
        }

        doc.getElementById( "s").style.color= "blue";
}
</script>
</head>
<body οnlοad= "f()">

<iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.htm" width = "100" height= "100">

</body>
</html>

MyIFrame.htm:

< h1 id = "s" style ="color:red;" >内容 < h1 >

DEＭＯ：

 
   
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 
 </head>
 <body>
 <div id="example">
 
     <h3 id="example_title">Javascript&nbsp;中父窗口与子窗口的交互</h3>
 
     <div id="example_main">
 
 <!--************************************* 实例代码开始 *************************************-->
 
 
 <script type="text/javascript">
 <!--
 function openWindow()
 {
     newWindow = window.open('','newWindow','height=300,width=300,scrollbars=auto');  
     if (newWindow != null)
     {
        var windowHTML= "<html><head><title>preview</title></head>";
        windowHTML += "<body><h1 align='center'>";
        windowHTML += "这是子窗口!</h1><hr><div align='center'><form action='#' method='get'>";
        windowHTML += "<input type='button' value='将父窗口的背景设为红色' οnclick='window.opener.document.bgColor=\"red\";' 
 
 /><br>";
        windowHTML += "<br ><input type='button' value='关闭' οnclick='self.close();' />";
        windowHTML += "</form></div></body></html>";
 
        newWindow.document.write(windowHTML);
        newWindow.focus();
     }
 }
 //-->
 </script>
 <input value='打开子窗口' onclick="openWindow();" type="button">
 <input type="button" value="将子窗口的背景设为蓝色" onclick="if (window.newWindow)
 
 {newWindow.document.bgColor='blue';newWindow.focus();}" />
 
 
 <!--************************************* 实例代码结束 *************************************-->
 
     </div>
 
     </body>
 </html> 
   
 

本文出自 “露水阑珊” 博客，请务必保留此出处http://wintys.blog.51cto.com/425414/123303

iframe框架内页：

 
    
  
<html>
 <head>
     <title>框架内页</title>
 </head>
 <body>
     <div>
         <input id="txt1" name="txt1" type="text" value="测试" />
     </div>
 </body>
 </html>
  
    
  

父级类：

 
     
   
<iframe name="frame1" id="frame1" src="frm.html" frameborder="1" height="30"></iframe>
 <p>
     iframe1中文本框的值:</p>
 <p>
     <input type="button" name="Submit" value="getValue" onclick="getValue()" />
 </p>
 
 <script type="text/javascript">
 function getValue(){
     var ofrm1 = document.getElementById("frame1").document;    
     if (ofrm1==undefined)
     {
         ofrm1 = document.getElementById("frame1").contentWindow.document;
         var ff = ofrm1.getElementById("txt1").value;
         alert("firefox/chrome取值结果为:" + ff);
     }
     else
     {
         var ie = document.frames["frame1"].document.getElementById("txt1").value;
         alert("ie取值结果为:" + ie);
     } 
 }
 </script> 
     
   

1. 打印iframe
     eg. frameName.document.execCommand('print');
2. 获取iframe
    eg. var ifr_window = window.frames["frameName"];
3. 获取iframe中的元素
   eg1. 将iframe中id为elementId 的元素置为不显示：
         var ifr_window = window.frames["frameName"];
         ifr_window.elementId.style.display = 'none';
eg2. 获取iframe中id为listTable的表格
        var oTable =   window.frames["myFrame"].document.all.listTable;
4. 隐藏或显示表格的某列
    js函数：
    function setHiddenOrShowCol(oTable, iCol, type) {
        for (i = 0; i < oTable.rows.length ; i++) {
            oTable.rows[i].cells[iCol].style.display = type;
        }
    }
    调用举例，将id为listTable的表格元素的第4列置为不显示：
    var oTable =   window.frames["myFrame"].document.all.listTable;
    setHiddenOrShowCol(oTable, 3, 'none');
    调用举例2，将id为listTable的表格元素的第4列置为显示：
    var oTable =   document.frames.myFrame.document.all.listTable;
    setHiddenOrShowCol(oTable, 3, 'block');

aaa333qwe

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript获取IFrame内容(兼容IE&FF)

在网上找到在IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById("s").style.color="blue";但是这在Firefox下无效。所以，想到在Firefox下用FireBug来调试。经过调试发现在Firefox下可用以下代码来实现: docum
复制链接

扫一扫