zoukankan      html  css  js  c++  java
  • 关于引用iframe的一点小说明

    有时候,在web页面中使用iframe,可以解决一些实际问题,比如跨域访问等……这篇文章的关键不是iframe适用于哪些场景?而是iframe间如何进行互通?所谓互通是指:

    情况1:在任何一个页面中调用其它页面的方法或数据(比如:在frameb.html中调用index.html中的sayHello)

    情况2:在任何一个页面中访问其它页面的元素(比如:在frameb.html中访问framea.html中的文本框)

    针对情况1:

    设有一个index.html页面,包含了两个iframe,id分别是framea和frameb,同时对应的url是framea.html和frameb.html。

    index.html有自己的sayHello()方法,及run_framea()、run_frameb()两个方法,分别调用framea.html和frameb.html中的sayHello()方法。

     1 <h1>我是主(父)窗口</h1>
     2 <button onclick="run_framea()">调用A窗口中的数据</button>
     3 <button onclick="run_frameb()">调用B窗口中的数据</button>
     4 
     5 <iframe id="framea" src="framea.html"></iframe>
     6 <iframe id="frameb" src="frameb.html"></iframe>
     7 <script>
     8 function sayHello() {
     9     alert('Hello, 我是主窗口');
    10 }
    11 function run_framea() {
    12     //window.frames['framea'].sayHello();
    13     window.frames['framea'].contentWindow.sayHello();
    14 }
    15 function run_frameb() {
    16     window.frames['frameb'].contentWindow.sayHello();
    17 }
    18 </script>

    调用的时候要注意两点:

    1)文档要加载完毕(包括iframe中的文档)。建议这类调用,要用在window.onload之后再执行相应的操作。

    2)访问iframe中的数据源的方法有如下几种:

    1 window[i].method(); //i是iframe的索引号
    2 
    3 window.frames[i].method(); //i是iframe的索引号
    4 
    5 window.frames['id'].contentWindow.method(); //id是iframe的DOM id
    6 
    7 //window.frames['id']方式访问得到是的iframe本身
    8 //window.frame[0]方式访问得到是iframe里文档的window
    9 //window.frames['id'].contentWindow === window.frame[0]

    下面是framea.html的原代码:也有他自己的sayHello()方法,和调用run_parent()、run_frameb()方法

    <h1>我是窗口A</h1>
    <button onclick="run_parent()">调用父窗口中的数据</button>
    <button onclick="run_frameb()">调用B窗口中的数据</button>
    
    <script>
    function sayHello() {
        alert('Hello, 我是窗口A');
    }
    function run_parent() {
        parent.sayHello();
    }
    function run_frameb() {
        parent.frames['frameb'].contentWindow.sayHello();
    }
    </script>

    注:parent是某个iframe的包含页面的window

    针对情况2:

    通过上面的例子可以得知,iframe[0]为一个文档的window对象,那么iframe[0].document则是对应的document对象。

  • 相关阅读:
    NOIP2020 退役记
    CSP2020 游记
    Owenのgalgame 颓废合集
    Atcoder Grand Contest 选做
    xlrd》操作excel 出现的问题:File "D:python37libsite-packagesxlrdformula.py", line 1150, in evaluate_name_formula assert len(tgtobj.stack) == 1
    数据库文档生成代码
    vue 父类组件如何引入子组件
    jna设置回调函数接收c++数组
    在一个vue文件调用另外一个vue文件中的方法
    idea 执行sprinboot 报错 commend line is too long
  • 原文地址:https://www.cnblogs.com/langzs/p/6698879.html
Copyright © 2011-2022 走看看