精华内容
下载资源
问答
  • 练习说明:使用postMessage可以在iFrame、父子窗口、跨页面等,之间相互传递消息。 demo地址:http://www.tkcb.cc/menu/skill/html/html_0001/ 为什么要下载?下载的好处:永远保存在自己电脑,防止网站网页失联。
  • iframe使用实例

    热门讨论 2011-08-09 16:02:13
    iframe使用实例,简单名了,演示iframe的基本功能
  • angular-through-iframe 如何通过 iframe 使用 angular.js。 在查看。 例子:
  • 使用场景 需求:在一个H5项目的页面中以url的方式嵌入另一个项目的页面。(不得不使用iframe) ...iframe使用 基本使用 直接在页面嵌套iframe标签指定src即可使用iframe。 <iframe src="xxx.html"></i...

    使用场景

    需求:在一个H5项目的页面中以url的方式嵌入另一个项目的页面。(不得不使用iframe)

    而为了兼容移动端api(封装的一个移动端api,iframe内嵌页面不生效),需要实现父子页面的通信 (使用postMessage)。

    iframe使用

    基本使用

    直接在页面嵌套iframe标签指定src即可使用iframe。

    <iframe src="xxx.html"></iframe>
    

    常用属性

    1. frameborder:是否显示边框,1(yes),0(no)
    2. height:框架作为一个普通元素的高度。
    3. width:框架作为一个普通元素的宽度。
    4. name:框架的名称,window.frames[name]时专用的属性。
    5. scrolling:框架的是否滚动。yes,no,auto。
    6. src:内框架的地址,可以使页面地址,也可以是图片的地址。
    7. sandbox:对iframe进行一些列限制,IE10+支持

    更多属性访问: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe

    iframe高度自适应

    let ifr = document.getElementById('ifr')
    const deviceHeight = document.documentElement.clientHeight;
    ifr.style.height = (Number(deviceHeight)) + 'px'; 
    

    vue中需要在mounted()中进行高度初始化

    获取iframe的内容

    1. 通过两个主要的API:contentWindowcontentDocument

      • iframe.contentWindow,获取iframe的window对象
      • iframe.contentDocument,获取iframe的document对象
      var iframe = document.getElementById("iframe1");
      var iwindow = iframe.contentWindow;
      var idoc = iwindow.document;
      
      console.log("window",iwindow);	//获取iframe的window对象
      console.log("document",idoc);	//获取iframe的document
      console.log("html",idoc.documentElement);	//获取iframe的html
      console.log("head",idoc.head);	//获取head
      console.log("body",idoc.body);	//获取body
      
    2. 通过Name属性,通过window提供的frames获取

      <iframe src ="xxx.html" id="ifr1" name="ifr1" scrolling="yes">
          <p>Your browser does not support iframes.</p>
      </iframe>
      <script type="text/javascript">
          console.log(window.frames['ifr1'].window);
          console.dir(document.getElementById("ifr1").contentWindow);
      </script>
      

      window.frames['ifr1'] 返回的就是window对象,即 window.frames['ifr1']===window

    同域下获取父级/子级内容

    • window.parent:获取上一级的window对象,如果还是iframe则是该iframe的window对象
    • window.top:获取最顶级容器的window对象

    iframe跨域

    以下形式的跨域,可以使用iframe进行解决。某一方使用iframe嵌套在另一方。

    比如:http://www.foo.com/a.htmlhttp://script.foo.com/b.html

    两个文件中分别加上 document.domain = 'foo.com',指定相同的主域,然后,两个文档就可以进行交互。

    //b.html是以iframe的形式嵌套在a.html中
    //www.foo.com上的a.html
    document.domain = 'foo.com';
    var ifr = document.createElement('iframe');
    ifr.src = 'http://script.foo.com/b.html';
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function(){
        var doc = ifr.contentDocument || ifr.contentWindow.document;
        // 在这里操纵b.html
        alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
    };
    //script.foo.com上的b.html
    document.domain = 'foo.com';
    

    默认情况下 document.domain 是指 window.location.hostname 。可以手动更改,但是最多只能设置为主域名。 通常,主域名就是指不带www的hostname, 比如: foo.com , baidu.com 。 如果,带上www或者其他的前缀,就是二级域名或者多级域名。通过上述设置,相同的domain之后,就可以进行同域的相关操作。

    如果设置的iframe的域名和 top.window 的域名完全不同。则可以使用postMessage()进行通信

    postMessage通信

    window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

    具体使用方式参考:window.postMessage

    <iframe src="http://xxx.com" name="sendMessage"></iframe>
    

    父页面向子页面传递信息:

    // 父页面js
    let ifr = window.frames['sendMessage'];
    // 向子页面发送message
    ifr.postmessage('give u a message', "http://xxx.com");
    
    // xxx.com页面js
    // 监听父页面传来的信息
    window.addEventListener('message', receiver, false);
    function receiver(e) {
        if (e.origin == 'http://xxx.com') {
            if (e.data == 'give u a message') {
                e.source.postMessage('received', e.origin);  // 向原网页返回信息
            } else {
                alert(e.data);
            }
        }
    }
    

    在vue中使用

    <iframe :src="src" ref="iframe" frameborder="0"></iframe>
    
    1. 要将获取到iframe的contentWindow属性放到mounted这个钩子函数中。

      mounted() {
          this.iframeWin = this.$refs.iframe.contentWindow;
      }
      
    2. 子页面向父页面传值

      父页面代码:

      // 父页面监听子页面传来的信息
      mounted() {
          window.addEventListener('message', this.handleMessage);
          this.iframeWin = this.$refs.iframe.contentWindow;
      },
      methods: {
          handleMessage (event) {
              const data = event.data.data
              if(data.info === "success"){
                  alert(data.data)
              }
          }
      }
      

      子页面代码:

      sendMessage() {
          // 向父页面发送信息
          window.parent.postMessage({
              data: {
                  info:"success",
                  data:"我是子页面的test!"
              }
          }, '*');
      }
      
    3. 父页面向子页面传递信息同理

      sendMessage () {
          // 向子页面传数据,需要注意这里没有parent
          this.iframeWin.postMessage({
              info: 'success',
              data: "我是来自父页面的data!"
          }, '*')
      }
      

      注意父向子传递信息的时候,要等子页面加载完成后,再进行通信

    展开全文
  • iframe使用

    千次阅读 2018-04-10 00:51:24
    // 第三种方式iframe中的src直接写,全部兼容 //window.result.location.href=search.do +"?sex=" + sex + "&age=" + age; script > body > html > 子页面 <!DOCTYPE html> < html lang = ...

    主页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--<meta name="theme-color" content="#000000">-->
        <title>React App</title>
        <style>
            .iframe123{
                position: absolute;
                top: 50%;
                left: 50%;
                width: 500px;
                height: 500px;
                margin-left: -250px;
                margin-top: -250px;
                border: #343cff 1px solid;
            }
        </style>
    </head>
    <body>
    <!--<iframe src="https://www.baidu.com/" width="100%" height="300px" ></iframe>-->
    <iframe src="./test1.html?name=啊" width="100%" height="300px"  id="gg" name="gg" frameborder="0" class="iframe123"></iframe>
    
    
    主页面
    <div id="root"></div>
    <script >
        //只有firefox支持,IE,google不支持
        var childFrameObj = document.getElementById('gg');
        childFrameObj.contentWindow.paramFromParent = 'userId0007';
    
    
        //第二种方式,全部兼容
        var sex='男',age='20';
        window.gg.location.href=childFrameObj.src +"?sex=" + sex + "&age=" + age;
    
        // 第三种方式iframe中的src直接写,全部兼容
        //window.result.location.href=search.do +"?sex=" + sex + "&age=" + age;
    </script>
    </body>
    </html>
    

    子页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    iframe页面
    <input type="text" value="" style="width: 360px">
    
    <script type="text/javascript">
        // var param = window.paramFromParent;
        // console.log(window.paramFromParent)
        // var inputObject =  document.getElementsByTagName('input')[0];
        // inputObject.value = param;
    
    
        console.log('=====================')
        // console.log(window.top.age)
        console.log(window.location.search)
        var inputObject =  document.getElementsByTagName('input')[0];
        inputObject.value = window.location.search;
    
    
        function getQueryString(name) {
            var search = document.location.search;
            //alert(search);
            var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
            var matcher = pattern.exec(search);
            var items = null;
            if (null != matcher) {
                try {
                    items = decodeURIComponent(decodeURIComponent(matcher[1]));
                } catch (e) {
                    try {
                        items = decodeURIComponent(matcher[1]);
                    } catch (e) {
                        items = matcher[1];
                    }
                }
            }
            return items;
        }
        console.log(getQueryString('sex'))
    
    </script>
    </body>
    </html>
    展开全文
  • iframe使用 自适应高度 封装js
  • layui选项卡 + iframe使用记录

    千次阅读 2019-04-25 15:31:00
    仅记录使用选项卡配和iframe 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <...

    文章目录

    仅记录使用选项卡配和iframe

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>发票统计</title>
        <link rel="stylesheet" href="/static/js/layui/css/layui.css">
        <link rel="stylesheet" href="/static/css/common.css"/>
        <!--[if lte IE 8]>
        <script src="/static/js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
    <div class="layui-card">
    
        <div class="layui-tab layui-tab-card">
    
            <ul class="layui-tab-title">
                <li class="layui-this">展会发票使用情况</li>
                <li>月度发票汇总</li>
            </ul>
    
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe style="width: 100%; min-height: 550px;" scrolling="no" frameborder="no" src="invoice_use_status.html"></iframe></div>
                <div class="layui-tab-item">
                    <iframe style="width: 100%; min-height: 550px;" scrolling="no" frameborder="no" src="monthly_invoice_summary.html"></iframe></div>
            </div>
        </div>
    </div>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/layui/layui.js"></script>
    <script>
        layui.use('element');
    </script>
    </body>
    </html>
    
    展开全文
  • webApp端iframe插件

    2019-01-26 17:15:03
    这是一款用于webApp端的iframe插件demo,css中有部分冗余样式,这是从项目简单拷贝出来的,还有一些demo无关样式并没有删除掉,所以大家使用的时候请自行调整样式即可
  • 最近手里有个项目需要用iframe来调用每天都会变化的页面,后来想到iframe会不会缓存页面呢,于是写了个demo论证了下,结果如下: iframe的src如果是静态页面,就有可能会缓存,因为静态页面有200和304状态 iframe的...
  • 最近在研究做后台页面时候,遇到页面加载过慢,调试一看,js加载太多,由于使用的是iframe导致浏览器每次都要加载js和css,别说缓存就不会, 缓存对iframe一点效果也没有,只是对当前的页面有效,而且iframe还是动态的创建...

    最近在研究做后台页面时候,遇到页面加载过慢,调试一看,js加载太多,由于使用的是iframe导致浏览器每次都要加载js和css,别说缓存就不会,

    缓存对iframe一点效果也没有,只是对当前的页面有效,而且iframe还是动态的创建创建的,于是就有了引用父页面的js想法.

    //获得这个iframe对象
    var iframe = $("iframe");
    //如果当前页面引用了jquery,那么在当前页面的window中会有一个$属性
    //我们需要的就是他,如果引用其他的js可以做成js对象的形式
    //打印一些下你可以看到
    console.log(window);
    
    //这样就获得iframe的window对象
    
    var iframeWindow = iframe.prop('contentWindow');
    //在iframe的window对象中创建一个属性名为$的属性,并且把当前页面window对象中的jquery对象复制到iframe中的$属性上
    //为什么不是 iframeWindow.$ = window.$;由于js代码的内存管理机制,这样做只是指向父页面window对象的$属性,所以使用jquery的深度复制对象
    //互不干扰
    iframeWindow.$ = $.extend(window.$);

    
    //这样就可以在iframe中直接使用$中的函数


    
    
    //iframe引用父页面的css,请关注下次的博客

    展开全文
  • Flex IFrame使用详解

    千次阅读 2012-04-26 14:48:50
    (1) IFrame使用方法:  1.下载swc库文件,导入lib,在页面拖入IFrame,添加IFrame的source属性即可嵌入网页!   2.修改html-template文件夹中,添加AC_OETags.js, 以便于确保浏览器兼容性!  3修改html-template...
  • 使用IE6浏览器开发过程中出现各种奇葩问题,非常棘手,费劲脑汁终于问题解决。小编把解决办法分享到脚本之家平台,需要的朋友可以参考下
  • 主要介绍了iframe跨域与session失效问题的解决办法,有需要的朋友可以参考一下
  • vue项目中一个模板组件,不同iframe的src地址,对应不同的路由,不同标签页,且切换标签页不重载。这种客户的要求是特例在网上没有,所以纯自行手码。由于项目在vuex保存了标签页,所以初次进入该组件时,调用了一次...
  • iframe使用总结(实战)

    万次阅读 多人点赞 2013-09-06 20:51:30
    b>使用iframe解决IE6下select遮挡不住的问题 c>通过iframe解决Ajax的前进后退问题 d>通过iframe实现异步上传。(Easyui中form组件就是用的iframe,实现表单提交时,可以提交上传域) 下面就一些问题一一论述。 1、...
  • iframe 使用

    2015-07-17 23:01:47
    iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 < <!--iframe在页面中的送点击 c.html 在iframe中显示 首先给 iframe 定义一个 name 将每个跳转页面中的 a 标签中添加 target...
  • 紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案    如果采用iframe来切换显示内容的方式来展现办公Web。那么需要解决几个问题  1.tab标签需要和显示的iframe一一对应,当点击到某个...
  • Flex项目Google IFrame使用,解决flexiframe消失的问题
  • iframe基本使用

    万次阅读 多人点赞 2018-04-25 19:00:43
    使用场景:页面大部分相同,少部分不一样。比如系统,每一个页面的left_nav和top内容一致,右下边内容在改变。优点:提高页面代码的重复使用率,让我们偷懒。缺点:页面url地址没有改变。本案例用layui,搭建一个...
  • iframe框架的使用

    万次阅读 2019-05-14 15:21:15
    <iframe src="iframe.html" width="100%" height="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe> <!-- 悬浮窗--> 我是充值悬浮窗 iframe.html <!...
  • Iframe使用总结(实战)

    千次阅读 2017-08-22 13:35:20
    说在前面的话,iframe是可以做很多事情的。 例如: ...b>使用iframe解决IE6下select遮挡不住的问题 c>通过iframe解决Ajax的前进后退问题 d>通过iframe实现异步上传。(Easyui中form组件就是用
  • 这个文档详细介绍了在flex中引入google开发的iframe组件。使用iframe组件能够很好将js页面嵌套进flex中,并且能很好的实现flex和js的交互。本文档详细描述了配置的过程,希望对你有所帮助。
  • 创建iframe对象,添加load事件, 再将iframe添加到body中。Chrome/Opera中会造成load事件的handler执行两次。
  • Iframe使用帮助

    2008-11-19 10:29:53
    IFRAME 元素也就是文档中的文档,或者好像浮动的框架(FRAME)。frames 集合提供了对 IFRAME 内容的访问。
  • iframe简单使用实例

    千次阅读 2018-12-07 16:12:03
    IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档... 技术简单,使用方便,主要应用于不需要搜索引擎来搜索的页面;  方便开发,减少代码的重复率(比如页面的he...
  • 使用iframe进行其他资源的引用: test.html &lt;html&gt; &lt;body&gt; &lt;title&gt;&lt;/title&gt; 基本的html文件 &lt;input type='text' value='testing'/&gt; &...
  • 实现内嵌的iframe跨域调用父页面js方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 131,842
精华内容 52,736
关键字:

iframe使用