JavaScript获取iframe里面的src路径里面的内容

最新推荐文章于 2025-07-22 11:13:40 发布

原创最新推荐文章于 2025-07-22 11:13:40 发布 · 1.5w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #javascript #xhtml #xmlhttprequest #function #html

js 同时被 2 个专栏收录

28 篇文章

订阅专栏

Ajax

3 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript获取和操作iframe内部页面的内容。通过XMLHttpRequest获取`myself.htm`的内容，或者利用`contentDocument`属性直接操作iframe内元素，如改变`id="s"`的文本颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a.htm:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a.htm</title>
<script type="text/javascript">
var xmlHttp=null;
     //判断浏览器
        function createXMLHttpRequest() {
            if (window.XMLHttpRequest) {
                //Firefox,Netscape,Chrome,Safari等浏览器
                xmlHttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) { //IE浏览器
                try {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //创建xmlHttp对象
                } catch (e) {
                    try {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建xmlHttp对象
                    } catch (e) { }
                }
            }
        }
function startRequest()
{
 createXMLHttpRequest();
 xmlHttp.onreadystatechange=onReadyState;
 xmlHttp.open("GET","myself.htm",true);
 xmlHttp.send(null); //发送请求
}
function onReadyState()
{
 if(xmlHttp.readyState==4 && xmlHttp.status==200)
 alert(xmlHttp.responseText);
}
//窗体加载事件
 window.onload=function()
{
 startRequest();
}
</script>
</head>

<body>
<iframe id="a" height="260px" src="b.htm" scrolling="no"></iframe>
</body>

</html>

b.htm:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>b.htm</title>
</head>

<body>
<iframe id="b" src="myself.htm" height="200px"></iframe>
</body>

</html>

myself.htm:
<!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>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>myself.htm</title>
</head>

<body>

<p>你好，这是myself.htm!</p>

</body>

</html>
结果是：myself.htm中的所有内容.


法二
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 onload="f()"> 

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


MyIFrame.htm: 


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