iframe

oiframe.contentWindow.document.getElementById
兼容所有浏览器
oiframe.contentDocument.document.getElementById
不兼容ie6\7

window.parent 父层
window.top 最顶层

ie下的iframeonload事件只能用绑定形式

防钓鱼
window!=window.top

iframepage.window.location.reload();

iframepage是一个id，是iframe里面的id，只有iframe有这种用法

<!doctype html>

<html lang="en">

<head>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<meta charset="UTF-8" />

<title>javascript demo</title>

<script type="text/javascript">

window.onload=function () {

    var oBtn=document.getElementById("btn1");

    var oIframe=document.getElementById("iframe1");

    

    oBtn.onclick=function () {

        oIframe.contentWindow.document.getElementById('p1').style.color='red';

        //chrome必须在服务器环境下才能打开

    }

}

</script>

</head>

<body>

    <input type="button" name="" id="btn1" value="click me" />

    <iframe id="iframe1" src="test.html" width="" height=""></iframe>

</body>

</html>

test.html

<!doctype html>

<html lang="en">

<head>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<meta charset="UTF-8" />

<title>test demo</title>

</head>

<body>

    <p id="p1">我是iframe的内容</p>

</body>

</html>

这是外面调用iframe

<!doctype html>

<html lang="en">

<head>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<meta charset="UTF-8" />

<title>javascript demo</title>

</head>

<body>

    <iframe id="iframe1" src="test.html" width="" height=""></iframe>

    <p id="p1">我是iframe外面的内容</p>

</body>

</html>

test.html

<!doctype html>

<html lang="en">

<head>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<meta charset="UTF-8" />

<title>test demo</title>

<script type="text/javascript">

window.onload=function () {

    var oBtn=document.getElementById("btn1");

    

    oBtn.onclick=function () {

//        window.parent.document.getElementById('p1').style.color='red';

        window.top.document.getElementById('p1').style.color='red';
　　　　 //chrome必须在服务器环境下才能打开

    }

}

</script>

</head>

<body>



    <input type="button" name="" id="btn1" value="click me" />

</body>

</html>

你可能感兴趣的:(iframe)