iframe

Posted 2020-08-09 认认真真，知难而进。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iframe相关的知识，希望对你有一定的参考价值。

父层下操作iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload = function(){
        //chrome中要在服务器下访问才行
        var oBtn = document.getElementById("btn1");
        var oIframe = document.getElementById("iframe1");
        
        oBtn.onclick = function(){
            //oIframe.contentWindow  >>  iframe window object
            //oIframe.contentDocument  >>  iframe document object

            //oIframe.contentWindow.document.getElementById("div1").style.backgroundColor = "red";
            oIframe.contentDocument.getElementById("div1").style.backgroundColor = "red";//ie6,7不支持
        };
    };
    </script>
</head>
<body>
    <input type="button" id="btn1" value="改变">
    <iframe src="iframe.html" id="iframe1"></iframe>
</body>
</html>

View Code

iframe中操作父层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload = function(){
        var oBtn = document.getElementById("btn1");
        
        oBtn.onclick = function(){
            //window.parent.document.getElementById("div1").style.backgroundColor = "red";//父层

            window.top.document.getElementById("div1").style.backgroundColor = "red";//最顶层
        };
    };
    </script>
</head>
<body>
    <input type="button" id="btn1" value="改变">
</body>
</html>

View Code

iframe onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        
    window.onload = function(){
        var oBtn = document.getElementById("btn1");

        oBtn.onclick = function(){
            var oIframe = document.createElement("iframe");
            oIframe.src = "iframe.html";
            document.body.appendChild(oIframe);
            // oIframe.onload = function(){
            //     alert(1);
            // };
            //ie下iframe的onload只能在绑定下使用

            if(oIframe.attachEvent){
                oIframe.attachEvent(‘onload‘,function(){
                    alert(123);
                });
            }
            else{
                oIframe.addEventListener(‘load‘,function(){
                    alert(123);
                });
            }
        };
    };
    </script>
</head>
<body>
    <input type="button" value="加载" id="btn1">
</body>
</html>

View Code

防钓鱼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    if(window != window.top){
        window.top.location.href = window.location.href;     
    }
    </script>
</head>
<body>
    <div id="div1">aaa</div>
</body>
</html>

View Code

setTimeout 延迟执行操作iframe

以上是关于iframe的主要内容，如果未能解决你的问题，请参考以下文章

从 google-site 上的嵌入式（iframe）片段，引用存储在 google 驱动器上的 json 文件

拥有的50个CSS代码片段(上)

Google 跟踪代码管理器集成安全性 - noscript iframe 沙盒

jQuery 的选择器在 iframe 中不起作用

如何保护来自iframe的Oauth2隐式流

easyui dialog弹出框的遮罩只遮罩iframe内的区域，怎样能遮罩整个页面