• iframe详细的使用


    谷歌火狐和ie是有区别的
    谷歌需要服务器,为了更安全 获取内容的时候, 正常渲染没问题
    获取内容
    var oIframe = document.getElementById('iframe');

    oIframe.contentWindow 获取到所有的内容节点
    注:谷歌下会报错 需要服务器下

    oIframe.contentWindow.document.getElementById('div') 获取到页面下的某个id为div的元素
    oIframe.contentWindow.document.getElementById('div').style.color='red' 改变他的字体颜色
    所有浏览器都支持

    操控document
    oIframe.contentDocument.getElementById('div') 可以直接获取到document下的元素
    注:ie6,7 不支持 。 所以在ie6,7 下需要获取window再操纵Document

    另一种情况 就是 三成嵌套
    利用最里面的iframe 控制最外层的父级 window.top
    例如:
    iframe.html
    <body>
    <iframe src="iframe1.html"></iframe>
    </body>

    iframe3.html
    <body>
    aa
    <iframe src="iframe.html"></iframe>
    </body>

    iframe1.html
    <body>
    <input type="button" value="变红" id="btn" />
    </body>

    //点击按钮使iframe3的aa变红
    var oBtn = document.getElementById('btn');
    oBtn.onclick=function(){
    window.top.getElementsByTagName('body')[0].style.color="red";
    };


    onload 事件 oIframe 有 onload 事件
    oIframe.onload=function(){ alert(1) } //chrome,ff
    oIframe.attachEvent('onload',function(){ alert(1) }) //ie 现在ie不需要事件绑定就可

    防止自己的网站被别人利用 被钓鱼 —— 做一下处理
    在自己的网站加js
    if(window!=window.top){
    window.top.location.href = window.location.href;
    }
    这样在连接自己网站的时候会直接跳到自己的网页

    实例:

    window.onload=function(){
    var oIframe = document.createElement('iframe');
    oIframe.src = 'iframe7.html';
    document.getElementsByTagName('body')[0].appendChild(oIframe);
    function changeHeight(){
    setTimeout(function(){
    oIframe.height = oIframe.contentWindow.document.body.offsetHeight;
    },500);
    }

    //根据连接文件的高度动态改变iframe的高度
    var oBtn = document.getElementById('btn');
    oBtn.onclick =function(){
    oIframe.src = 'iframe8.html';
    changeHeight();
    }
    var oBtn1 = document.getElementById('btn1');
    oBtn1.onclick =function(){
    oIframe.src = 'iframe7.html';
    changeHeight();
    }
    changeHeight();
    }

  • 相关阅读:
    leetcode 189. Rotate Array 数组旋转 ---------- java
    Google test Problem A. Country Leader
    leetcode 187. Repeated DNA Sequences 求重复的DNA串 ---------- java
    mysql忘记密码(未初始化)
    leetcode 186. Reverse Words in a String II 旋转字符数组 ---------- java
    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)
    bootstrap
    bootstrap使用中遇到的问题(二)
    兼容ie8 rgba()用法
    浏览器前缀
  • 原文地址:https://www.cnblogs.com/wangjie-001/p/6129726.html
Copyright © 2020-2023  润新知