前端iframe操作大全
// 父页面操作子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
<script src="./jquery-1.12.4.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; #000;">
<iframe name='aa' id='aa' src="./iframe.html" frameborder="0" scrolling="no" allowfullscreen='true' width='100%' height='50%'></iframe>
<iframe name='cc' id='cc' src="./iframe2.html" frameborder="0" scrolling="no" allowfullscreen='true' width='100%' height='50%'></iframe>
</div>
<script>
function index() {
console.log("我是父页面的index方法")
}
// 父页面操作子页面 下述方法需要通过服务器端进行，纯静态页面不可以
// 父页面获取子页面的window对象 一定要用iframe的dom对象.contentWindow 不能用jq对象 jq对象转dom对象 jq对象【0】
var iframe = $("#aa")[0].contentWindow;
// 或者
var iframe1 = $(window.parent.document).contents().find("#aa")[0].contentWindow;
// 父页面操作子页面的dom元素
// jq对象.contents()方法可以获取当前jq对象dom下的所有子节点 包含文本节点。如果元素是一个iframe，则查找文档内容 获取到的是docuemnt的jq对象
$("#aa").contents().find('#bb').css({ "width": $('#aa').width(), "height": $('#aa').height() })
// 或者
$("#aa")[0].contentWindow.$("#bb").css("background-color", "red")
// 父页面给子页面传值
$("#aa")[0].contentWindow.userName = "wwp";
window.userName = "wwp2"
// 父页面使用子页面定义的方法
$("#aa")[0].contentWindow.iframe();
</script>
</body>
</html>
// 子页面操作父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ifrae</title>
<script src="./jquery-1.12.4.js"></script>
<style>
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="bb" style='aqua; width: 100%; height: 100%;'></div>
<script>
function iframe() {
console.log("我是子页面的iframe方法")
}
// 子页面获取父页面的window对象方法
var parentWindow = window.parent || window.top
$('#bb').css({'width': $('#aa', window.parent.document).width(), 'height': $('#aa', window.parent.document).height()})
console.log(window.userName)
// $('#aa', window.parent.document)
// 子页面获取父页面的dom对象
var $aa = $(window.parent.document).contents().find("#aa")
// 子页面使用父页面传值数据
var userName = window.userName;
console.log(userName);
// 数据存在父页面的window中
var userName2 = window.parent.userName;
console.log(userName2)
// 子页面使用父页面定义的方法
window.parent.index();
// 子页面操作嵌套在父页面中的同级子页面的dom元素
// 先获取兄弟页面的window对象 调用方法时加一个定时器 不加会报错， 应该是代码加载顺序和速度问题，嵌套页面是一个耗时操作
var iframe2 = $(window.parent.document).contents().find("#cc").contentWindow;
setTimeout(function () {
iframe2.iframeFun();
}, 50)
// 备注
// window.parent、window.top(这里的TOP是获取的顶层，即有多层嵌套iframe的时候使用)
// top.$("iframe[name='iframeWindow']")[0].contentWindow.$("#inside_tableElement")，这样才能获取到iframe里的元素，
</script>
</body>
</html>
