1、代码1 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是demo1.html</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="点击按钮控制iframe页面" />
<br />
<iframe id="iframe1" src="iframe1.html" width="300" height="200"></iframe>
<script>
// window.onload = function(){
// var oBtn1 = document.getElementById('btn1');
// //获取iframe元素,oIframe.contentWindow就是iframe1.html页面的window对象
// var oIframe = document.getElementById('iframe1');
// var ifdoc = oIframe.contentWindow.document;
// oBtn1.onclick = function() {
// //demo1.html页面中的js控制了iframe1.html页面的字体颜色
// oIframe.contentWindow.document.body.style.color = 'red';
// console.log(ifdoc.)
// }
// }
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
//获取iframe元素,oIframe.contentWindow就是iframe1.html页面的window对象
var oIframe = $("#iframe1")[0];
var ifdoc = oIframe.contentWindow.document;
oBtn1.onclick = function() {
//demo1.html页面中的js控制了iframe1.html页面的字体颜色
oIframe.contentWindow.document.body.style.color = 'red';
var text = ifdoc.getElementById("bbs").textContent=" ";
console.log(text)
}
}
</script>
</body>
</html>
2、代码二是iframe页面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是iframe1.html</title>
</head>
<body>
<div id="bbs">
父级页面要改变我的颜色
</div>
</body>
</html>
通过选中iframe标签使用contentWindow 方法来获取iframe子页面的document。