zoukankan      html  css  js  c++  java
  • 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();
    }

  • 相关阅读:
    Linux用户态程序计时方式详解
    我的代码重构经验
    基于链表的C语言堆内存检测
    C语言内存使用的常见问题及解决之道
    1151 LCA in a Binary Tree (30 分)
    1150 Travelling Salesman Problem (25 分)
    1149 Dangerous Goods Packaging (25 分)
    1148 Werewolf
    1155 Heap Paths (30 分)
    1154 Vertex Coloring (25 分)
  • 原文地址:https://www.cnblogs.com/wangjie-001/p/6129726.html
Copyright © 2011-2022 走看看