这篇文章给大家介绍Javascript中怎么对iframe进行操作，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
为了更好的讲解和演示，我们准备3个页面，父级页面index.html的html结构如下。另外两个子页面分别为iframeA.html和iframeB.html。我们需要演示通过父页面获取和设置子页面iframeA.html中元素的值，以及演示通过子页面iframeB.html设置子页面iframeA.html相关元素的值以及操作父页面index.html元素。
<p class="opt_btn">
<button onclick="getValiframeA();">父窗口获取iframeA中的值</button>
<button onclick="setValiframeA();">父窗口设置iframeA中的值</button>
<button onclick="setBgiframeA();">父窗口设置iframeA的h2标签背景色</button>
</p>
<p id="result">--操作结果--</p>
<p class="frames">
<iframe id="wIframeA" name="myiframeA" src="iframeA.html" scrolling="no" frameborder="1"></iframe>
<iframe id="wIframeB" name="myiframeB" src="iframeB.html" scrolling="no" frameborder="1"></iframe>
</p>
iframeA.html布置一个h2标题，以及一个输入框和一个p段落，结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xuebuyuan.com</title>
</head>
<body>
<h2 id="title">iframe A</h2>
<input type="text" id="iframeA_ipt" name="iframeA_ipt" value="123">
<p id="hello">xuebuyuan.com欢迎您！</p>
</body>
</html>
iframeB.html同样布置h2标题和段落以及输入框。iframe有两个按钮，调用了javascript，相关代码等下在js部分会描述。
<html>
<head>
<meta charset="utf-8">
<title>xuebuyuan.com</title>
</head>
<body>
<h2>iframe B</h2>
<p id="hello">Helloweb.com</p>
<input type="text" id="iframeB_ipt" name="iframeB_ipt" value="1,2,3,4">
<button onclick="child4parent();">iframeB子窗口操作父窗口</button>
<button onclick="child4child();">iframeB操作子窗口iframeA</button>
</body>
</html>
页面html都布置好了，现在我们来看Javascript部分。
首先我们来看index.html父级页面的操作。JS操作iframe里的dom可是使用contentWindow属性，contentWindow属性是指指定的frame或者iframe所在的window对象，在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则，必须指定contentWindow属性，contentWindow属性支持所有主流浏览器。
我们自定义了函数getIFrameDOM()，传入参数iID即可获取iframe，之后就跟在当前页面获取元素的操作一样了。
function getIFrameDOM(iID){
return document.getElementById(iID).contentWindow.document;
}
index.html的三个按钮操作代码如下：
function getValiframeA(){
var valA = getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value;
document.getElementById("result").innerHTML = "获取了子窗口iframeA中输入框里的值：<span style='color:#f30'>"+valA+"</span>";
}
function setValiframeA(){
getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value = 'Helloweba';
document.getElementById("result").innerHTML = "设置了了子窗口iframeA中输入框里的值：<span style='color:#f30'>Helloweba</span>";
}
function setBgiframeA(){
getIFrameDOM("wIframeA").getElementById('title').style.background = "#ffc";
}
保存后，打开index.html看下效果，是不是操作很简单了。
好，iframeB.html的两个按钮操作调用了js，代码如下：
function child4child(){
var parentDOM=parent.getIFrameDOM("wIframeA");
parentDOM.getElementById('hello').innerHTML="<span style='color:blue;font-size:18px;background:yellow;'>看到输入框里的值变化了吗？</span>";
parentDOM.getElementById('iframeA_ipt').value = document.getElementById("iframeB_ipt").value;
parent.document.getElementById("result").innerHTML="子窗口iframeB操作了子窗口iframeA";
}
function child4parent(){
var iframeB_ipt = document.getElementById("iframeB_ipt").value;
parent.document.getElementById("result").innerHTML="<p style='background:#000;color:#fff;font-size:15px;'>子窗口传来输入框值：<span style='color:#f30'>"+iframeB_ipt+"</span></p>";
}
子页面iframeB.html可以通过使用parent.getIFrameDOM()调用了负页面的自定义函数getIFrameDOM()，从而就可以对平级的子页面iframeA.html进行操作，子页面还可以通过使用parent.document操作父级页面元素。
关于Javascript中怎么对iframe进行操作就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
