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