iframe相关操作

内容摘要

父级获取iframe中的元素
父级触发iframe中的函数
iframe触发父级元素绑定的事件
iframe触发父级函数方法
iframe触发父级元素的值

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>parent</title>
    <style type="text/css" media="screen">
    * {
        margin: 0;
        padding: 0;
    }
    iframe {
        border: 0;
    }
    </style>
</head>
<body>
    <p>下面为要调用的iframe标签，也可以通过类名来设置宽高</p>
    <iframe src="ifr.html" name="ifr" width="100%" height="200" class="ifr" id="ifr"></iframe>
    <!-- iframe触发父页面事件 -->
    <p>我是父页面的内容,点击iframe中的按钮，触发父页面中的事件，改变 <span class="change1">#1</span></p>
    <p class="change11">子级iframe会改变我的内容</p>
    <!-- 父页面调用子iframe的方法 -->
    <button class="p-btn1">点我调用子iframe中的方法</button>
    <div id="parent-val">我是父页面的内容</div>
</body>
<script src="./jquery.min.js"></script>
<script>
function fun() {
    alert("点击子元素中的按钮执行父元素中的函数")
}
$(".change1").on('click', function() {
    console.log('parent')
    $(this).html("#1#1")
})
$(".p-btn1").on('click', function() {
    // 调用子iframe中的方法
    parent.frames["ifr"].window.childMethods1();
    $(".ifr")[0].contentWindow.childMethods1();
    document.getElementById("ifr").contentWindow.childMethods1();
    // 查找iframe中的元素
    console.log($(".ifr").contents().find(".title").html())
    // 原生方法候去iframe元素的值
    let doc=document.getElementById("ifr").contentWindow.document;
    let tit=doc.getElementById("ifr-val").innerHTML;
    console.log(tit) 

})
</script>
</html>

ifr.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe1</title>
</head>
<body>
    <div id="ifr-val">我是ifr的内容</div>
    <p class="title">我是iframe1</p>
    <button type="button" class="ifr1-btn">点我改变父页面内容 #1->#1#1</button>
</body>
<script src="jquery.min.js"></script>
<script>
function childMethods1() {
    console.log('我是子iframe中的方法!')
}
$(".ifr1-btn").on('click', function() {
    console.log("iframe1")
    // 点击触发父页面的事件
    parent.$(window.parent.document).find('.change1').click()
    // 点击直接改变父页面中的dom
    parent.$(window.parent.document).find('.change11').html("gggg")
    // 点击执行父页面中定义的方法
    parent.fun()
    window.parent.fun()
    // 获取父元素中元素的内容
    console.log($(".p-btn1", window.parent.document).html())
    console.log(window.parent.$(".p-btn1").html())
    console.log(window.parent.document.getElementById("parent-val").innerHTML)

})
</script>
</html>

总结

原生js

父调子

元素：window.frames[iframe的name属性值];

方法：

① document.getElementById("子页面元素ID").contentWindow.子页面方法名;
② document.getElementsByTagName("子页面元素标签名")[i].contentWindow.子页面方法名;
③ document.getElementsByClassName("子页面元素类名")[i].contentWindow.子页面方法名;

子调父

元素：

① window.parent.document.getElementById("父页面元素ID");
②window.parent.document.getElementsByTagName("父页面元素标签名")[i];
③window.parent.document.getElementsByClassName("父页面元素类名")[i];

方法：window.parent.父页面方法;

原生方法还是使用id比较靠谱

jquery

父调子

元素：$(iframe选择器).contents().find(iframe中元素选择器);

// 查找iframe中的元素
    console.log($(".ifr").contents().find(".title").html())

方法：$(iframe选择器)[0].contentWindow.子页面方法名;

// 调用子iframe中的方法
parent.frames["ifr"].window.childMethods1();
$(".ifr")[0].contentWindow.childMethods1();

子调父

元素：

① $(父页面元素选择器, window.parent.document);
② window.parent.$(父页面元素选择器)

// 获取父元素中元素的内容
console.log($(".p-btn1", window.parent.document).html())
console.log(window.parent.$(".p-btn1").html())
parent.$(window.parent.document).find('.change11').html("gggg")

方法：window.parent.父页面方法;

// 点击执行父页面中定义的方法
    parent.fun()
    window.parent.fun()
// 点击触发父页面的事件
parent.$(window.parent.document).find('.change1').click()