zoukankan html css js c++ java

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

查看全文

相关阅读:
xhEditor入门基础
 【Scala-ML】使用Scala构建机器学习工作流
 POJ 2482 Stars in Your Window（线段树）
Xcode6 UIWebView与JavaScript交互（issue fix）
poj1159--Palindrome（dp:最长公共子序列变形 + 滚动数组）
把握linux内核设计思想（十二）：内存管理之slab分配器
 Andriod DiskLruCache的使用案例
 Lambda 表达式的演示样例-来源(MSDN)
HDU 4857 topological_sort
Thinking in React（翻译）

原文地址：https://www.cnblogs.com/jiujiaoyangkang/p/5877988.html