操作iframe

  iframe是在页面中嵌套的子页，当前页面（这里称为父页）和嵌套页面（这里称为子页）可以相互控制：

当父页控制子页用contentWindow，用法为 对象.contentWindow.document.XX  或用contentDocument.XX 来操作

子页控制父页用window.parent.document.XX   如果是多层嵌套想直接操纵祖先页面就用 window.top.document.XX

<!DOCTYPE HTML>

<html>

<head>

    <title>HTML5实现拖拽操作</title>

    <meta charset="utf-8"/>

    <style>

    </style>

    <script>

    window.onload=function(){

        var oinput=document.getElementById('input1');

        var oif=document.getElementById('f1');

        oinput.onclick=function(){

            //alert(oif.contentWindow.document.getElementById('d1'));

            //contentWindow全部浏览器都支持

            //contentDocument   浏览器IE6，IE7不支持

            oif.contentDocument.getElementById('d1').style.color='red';

            //oif.contentWindow.document.getElementById('d1').style.color='red';

        };

    }

    </script>

</head>

<body>

    <input type='button' value='点我' id='input1'/>

    <iframe src='iframe1.html' id='f1'> </iframe>

    <div id='d1'>通过子更改我的背景色 </div>

</body>

</html>

   本实例牵扯到父页和多个子页，多重嵌套，要用到多个页面的多篇代码，原理很好理解，但要精确表达出却很困难，其核心知识就是开头介绍的几个方法。总之今天学的东西很多很杂，代码多次更改没有合理保存，以后不急不躁，一步一个脚印。

补充：禁止别人以iframe加载你的页面

if (window.location != window.parent.location) window.parent.location = window.location;

补充：禁止别人以iframe加载你的页面

相关文章