zoukankan      html  css  js  c++  java
  • 操作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;
  • 相关阅读:
    大端法小端法以及判断方法
    多线程的同步互斥
    LeetCode344 字符串反转
    LeetCode977 有序数组的平方
    剑指54 二叉搜索树的第k大节点
    Linux抓包工具tcpdump使用总结,WireShark的过滤用法
    二进制部署k8s集群(8):安装容器网络插件Flannel
    python--Yaml操作
    python--读写excle执行测试用例
    python--安装、操作mysql数据库
  • 原文地址:https://www.cnblogs.com/chayangge/p/4288687.html
Copyright © 2011-2022 走看看