大奖18dj18vip-大奖18dj18娱乐官网

助力产业智慧升级,云服务器首年88元起,更有千元代金券礼包免费领!

大奖18dj18vip

查看: 90|回复: 0
打印 上一主题 下一主题

[Web开发] HTML-iframe标签

[复制链接]
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 550 天

    [LV.9]以坛为家II

    硕士生

    1万

    主题

    1万

    帖子

    3万

    积分

    Rank: 8Rank: 8

    UID
    15343
    威望
    -561
    贡献
    7964
    在线时间
    245 小时
    注册时间
    2015-10-12
    跳转到指定楼层
    楼主
    发表于 2019-8-21 13:59:16 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
    推广者专属福利,新客户无门槛领取总价值高达2775元代金券,每种代金券限量500张,先到先得。

    碎碎:这两天在实践中,用到了 iframe,之前对其不甚了解,了解之中遇到好多奇葩问题,今天记录下这两天遇到的相关的内容。

    • 嵌入的 iframe 页面的边框
    • 嵌入的 iframe 页面的背景
    • 嵌入的 iframe 页面居中
    • 嵌入的 iframe 页面的滚动条
    • iframe 父页面调用子页面
    • iframe 子页面调用父页面
    1. iframe 嵌入页面的边框//HTML 元素:主要有 src: 要嵌入的页面<iframe id="framePage" src="iframe/inner_page.jsp"></iframe>
    // 默认有边框: 新建测试文件,命名:test_iframe01.html,内容如下:
    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head>
    //为了方便区别,对应设置了样式<style>    .iframe_page{        width: 400px;        height: 260px;        background-color: #dfdfdf;  //为了方便区别,设置背景样式    }    .iframe_page #framePage{        width: 300px;        height: 200px;        background-color: #adb9cd; //为了方便区别,设置背景样式    }</style><body>    <!-- 嵌入 iframe 模块 -->    <div class="iframe_page">        <iframe id="framePage" src="inner_page.html"></iframe>    </div></body></html>

    运行显示如下:



    可以看到 iframe 嵌入页面,类似层级摞在上面(即 iframe层 压在原来页面上层),且外面有白色边框显示,这就是 iframe 默认显示样式。



    • 取消边框:只需在 iframe 标签中设置 frameborder 属性即可frameborder 有两种属性值:1. frameborder="0";   //无边框显示2. frameborder="1";   //有边框显示 (默认状态,且边框为白色)

      eg: 只需将上面文件中的 iframe 标签内容添加上 frameborder="0" 即可,此时全部代码如下:
      <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head><style>    .iframe_page{        width: 400px;        height: 260px;        background-color: #dfdfdf;    }    .iframe_page #framePage{        width: 300px;        height: 200px;        background-color: #adb9cd;    }</style><body>    <!-- 嵌入 iframe 模块 -->    <div class="iframe_page">        <iframe id="framePage" src="inner_page.html" frameborder="0"></iframe>    </div></body></html>


      执行后就会看到上面的白色边框消失,如下:



    • 边框样式设置:当然,若想层级显示,但不想要默认的边框时,我们可以自行设置边框,只需给对应 iframe 页面设置样式时,添加上边框设置
      如下:给 id="framePage" 的 iframe 设置 border 属性,添加后样式如下:.iframe_page #framePage{    width: 300px;    height: 200px;    background-color: #adb9cd;    border: 3px dashed #cc9797;  //设置 iframe边框样式}更改后的完整代码如下:

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>Title</title>
      </head>

      <style>
      .iframe_page{
      width: 400px;
      height: 260px;
      background-color: #dfdfdf;
      }
      .iframe_page #framePage{
      width: 300px;
      height: 200px;
      background-color: #adb9cd;
      border: 3px dashed #cc9797; //更改iframe边框样式
      }
      </style>

      <body>
      <!-- 嵌入 iframe 模块 -->
      <div class="iframe_page">
      <iframe id="framePage" src="inner_page.html"></iframe>
      </div>
      </body>
      </html>

      更改后的 test_iframe01.html

      运行后效果如下:


    2. 嵌入的 iframe 页面的背景
    • 背景透明:需在 iframe 标签中添加 allowtransparency 属性设置
      网上说背景透明1. 需对<iframe>标签设置 allowtransparency 属性:   allowtransparency="true"  //背景透明, 前提不能设置 iframe 的背景样式2. 并对 <iframe>标签引用的 src="***.html" 文件中设置:  <body style=" color: rgb(128, 0, 0); line-height: 1.5 !important;">"> 或 <body bgcolor="transparent">
      但我测试 iframe 标签 设置allowtransparency=true 与         iframe 背景样式不设置效果一样, 都是没有背景(即,默认父元素背景样式)

      !!综合来说:没找到使背景透明的方法,如果有人知道麻烦告知,谢谢~~

    • 背景样式设置:需在 iframe 样式设置时添加背景样式设置
      如下: 需在 iframe 样式设置时,添加背景设置,具体代码如下:.iframe_page #framePage{    width: 300px;    height: 200px;    background-color: #adb9cd;  //设置嵌入的iframe背景    border: 3px dashed #cc9797;}

      整体代码如下:


      <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head><style>    .iframe_page{        width: 400px;        height: 260px;        background-color: #dfdfdf;    }    .iframe_page #framePage{        width: 300px;        height: 200px;        background-color: #adb9cd;  //更改嵌入的 iframe 背景颜色        border: 3px dashed #cc9797;    }</style><body>    <!-- 嵌入 iframe 模块 -->    <div class="iframe_page">        <iframe id="framePage" src="inner_page.html"></iframe>    </div></body></html>
      <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head><style>    .iframe_page{        width: 400px;        height: 260px;        background-color: #dfdfdf;    }    .iframe_page #framePage{        width: 300px;        height: 200px;        background-color: #adb9cd;  //更改嵌入的 iframe 背景颜色        border: 3px dashed #cc9797;    }</style><body>    <!-- 嵌入 iframe 模块 -->    <div class="iframe_page">        <iframe id="framePage" src="inner_page.html"></iframe>    </div></body></html>





    3. 嵌入的 iframe 页面位置查到资料显示,有两种方式:
    • 使用 iframe 元素的 属性 align 进行设置(由于兼容性,align设置法不推荐)如下: <iframe id="framePage" align="right" allowtransparency="true" src="inner_page.html" frameborder="0"></iframe>
    • 使用 float 进行样式设置(推荐)
      如下:.iframe_page #framePage{    width: 600px;    height: 300px;    background-color: #adb9cd;    border: 3px dashed #cc9797;    float: right



    上述两者效果一样,但其常用属性值只有: left, right, 并没有达到我们想要的居中效果

      解决办法: 可让 iframe 外层的 div 元素居中,并可设置 iframe 与 外层div大小完全相同,即可实现居中


    如下:.iframe_page{    margin: 0 auto;    width: 400px;    height: 260px;    background-color: #dfdfdf;}.iframe_page #framePage{    width: 400px;    height: 260px;    background-color: #adb9cd;    border: 3px dashed #cc9797;}

    完整代码如下:


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Title</title>
    </head>

    <style>
    .iframe_page{
    margin: 0 auto;
    width: 400px;
    height: 260px;
    background-color: #dfdfdf;
    }
    .iframe_page #framePage{
    width: 400px;
    height: 260px;
    background-color: #adb9cd;
    border: 3px dashed #cc9797;
    }
    </style>

    <body>
    <!-- 嵌入 iframe 模块 -->
    <div class="iframe_page">
    <iframe id="framePage" src="inner_page.html"></iframe>
    </div>
    </body>
    </html>

    更改后的 test_iframe01.html


    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head><style>    .iframe_page{        margin: 0 auto;        width: 400px;        height: 260px;        background-color: #dfdfdf;    }    .iframe_page #framePage{        width: 400px;        height: 260px;        background-color: #adb9cd;        border: 3px dashed #cc9797;    }</style><body>    <!-- 嵌入 iframe 模块 -->    <div class="iframe_page">        <iframe id="framePage" src="inner_page.html"></iframe>    </div></body></html>




    4. 嵌入的 iframe 页面的滚动条
    • 使用 iframe 的 scrolling 属性(横/纵向一起控制)1. 显示滚动条:scrolling="yes" 或 scrolling="auto" (超出边框自动显示滚动条,且可滚动)2. 不显示滚动条: scrolling="no"  (始终不显示滚动条,且超出部分不能滚动)
    • 使用 overflow 进行样式设置
      overflow 样式(横/纵)选项有:1. 显示滚动条,内容剪切,可滚动:overflow: scroll;  //等价于 overflow: auto;2. 不显示滚动条,内容不可见,不可滚动:overflow: hidden;3. 不显示滚动条,内容超出框,不可滚动:overflow: visible;4. inherit: 继承父元素 overflow 属性

      横向/纵向 单项设置:overflow-x 或 overflow-y 属性值同 overflow


    总结以上样式:1. 滚动条显示 且 可滚动查看内容2. 滚动条不显示 且 不可滚动查看内容
    这不是我们想要的 滚动条不显示 但 可滚动查看内容,即可以自定义滚动条样式

    查询资料显示可设置


    1. 父页面标准<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 要改为 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2. 设置iframe页面:body,  html{     scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/     scrollbar-highlight-color:#fff; /*- 左二 -*/     scrollbar-face-color:#E4E4E4; /*- 面子 -*/     scrollbar-arrow-color:#666; /*- 箭头 -*/     scrollbar-shadow-color:#808080; /*- 右二 -*/     scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/     scrollbar-base-color:#D7DCE0; /*- 基色 -*/     scrollbar-track-color:#;/*- 滑道 -*/ }

    我测试之后完全不行,卡壳了几天,最终采用插件完成,在此推荐 jquery.nicescroll.min.js 插件


    jquery.nicescroll v3.7.6
    1. 支持div,iframe,html 等
    2. 兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条
    3. jq插件,jq 版本要高于 1.8

    cursorcolor - 设置滚动条颜色,默认值是“#000000”
    cursoropacitymin - 滚动条透明度最小值
    cursoropacitymax - 滚动条透明度最大值
    cursorwidth - 滚动条的宽度像素,默认为5(你可以写“5PX”)
    cursorborder - CSS定义边框,默认为“1px solid #FFF”
    cursorborderradius - 滚动条的边框圆角
    ZIndex的 - 改变滚动条的DIV的z-index值,默认值是9999
    scrollspeed - 滚动速度,默认值是60
    mousescrollstep - 滚动鼠标滚轮的速度,默认值是40(像素)
    touchbehavior - 让滚动条能拖动滚动触摸设备默认为false
    hwacceleration - 使用硬件加速滚动支持时,默认为true
    boxzoom - 使变焦框的内容,默认为false
    dblclickzoom - (仅当boxzoom = TRUE)变焦启动时,双点击框,默认为true
    gesturezoom - boxzoom = true并使用触摸设备)变焦(仅当激活时,间距/盒,默认为true
    grabcursorenabled“抢”图标,显示div的touchbehavior = true时,默认值是true
    autohidemode,如何隐藏滚动条的作品,真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏的背景下,改变铁路背景的CSS,默认值为“”
    iframeautoresize中,AUTORESIZE iframe上的load事件(默认:true)
    cursorminheight,设置最低滚动条高度(默认值:20)
    preservenativescrolling,您可以用鼠标滚动本地滚动的区域,鼓泡鼠标滚轮事件(默认:true)
    railoffset,您可以添加抵消顶部/左轨位置(默认:false)
    bouncescroll,使滚动反弹结束时的内容移动(仅硬件ACCELL)(默认:FALSE)
    spacebarenabled,允许使用空格键滚动(默认:true)
    railpadding,设置间距(默认:顶:0,右:0,左:0,底部:0})
    disableoutline,Chrome浏览器,禁用纲要(橙色hightlight)时,选择一个div nicescroll(默认:true)

    nicescroll详细参数配置:


    cursorcolor - 设置滚动条颜色,默认值是“#000000”cursoropacitymin - 滚动条透明度最小值cursoropacitymax - 滚动条透明度最大值cursorwidth - 滚动条的宽度像素,默认为5(你可以写“5PX”)cursorborder - CSS定义边框,默认为“1px solid #FFF”cursorborderradius - 滚动条的边框圆角ZIndex的 - 改变滚动条的DIV的z-index值,默认值是9999scrollspeed - 滚动速度,默认值是60mousescrollstep - 滚动鼠标滚轮的速度,默认值是40(像素)touchbehavior - 让滚动条能拖动滚动触摸设备默认为falsehwacceleration - 使用硬件加速滚动支持时,默认为trueboxzoom - 使变焦框的内容,默认为falsedblclickzoom - (仅当boxzoom = TRUE)变焦启动时,双点击框,默认为truegesturezoom - boxzoom = true并使用触摸设备)变焦(仅当激活时,间距/盒,默认为truegrabcursorenabled“抢”图标,显示div的touchbehavior = true时,默认值是trueautohidemode,如何隐藏滚动条的作品,真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏的背景下,改变铁路背景的CSS,默认值为“”iframeautoresize中,AUTORESIZE iframe上的load事件(默认:true)cursorminheight,设置最低滚动条高度(默认值:20)preservenativescrolling,您可以用鼠标滚动本地滚动的区域,鼓泡鼠标滚轮事件(默认:true)railoffset,您可以添加抵消顶部/左轨位置(默认:false)bouncescroll,使滚动反弹结束时的内容移动(仅硬件ACCELL)(默认:FALSE)spacebarenabled,允许使用空格键滚动(默认:true)railpadding,设置间距(默认:顶:0,右:0,左:0,底部:0})disableoutline,Chrome浏览器,禁用纲要(橙色hightlight)时,选择一个div nicescroll(默认:true)


    使用 jquery.nicescroll.min.js 插件设置的 iframe 滚动条样式,举例:

    <!--<!DOCTYPE html>-->
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Title</title>
    </head>
    <body>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    <p>岁月</p>
    </body>
    </html>

    子页面 inner_page.html



    <!--<!DOCTYPE html>--><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head><body>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p>    <p>岁月</p></body></html>


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="jquery.nicescroll.min.js"></script>
    </head>

    <style>
    .iframe_page{
    width: 300px;
    height: 260px;
    background-color: #dfdfdf;
    }
    .iframe_page #myFrameId{
    width: 280px;
    height: 240px;
    background-color: #adb9cd;
    border: 3px dashed #cc9797;
    }

    </style>

    <body style="scrollbar-base-color:red">
    <!-- 嵌入 iframe 模块 -->
    <div class="iframe_page">
    <iframe id="myFrameId" src="inner_page.html"></iframe>
    </div>
    <script>
    $("#myFrameId").niceScroll({
    cursorcolor: "#E62020", //滚动条颜色
    cursoropacitymax: 0.5, //滚动条透明度
    touchbehavior: false,
    cursorwidth:"5px",
    cursorborder:"0",
    cursorborderradius:"5px"

    });
    </script>
    </body>
    </html>

    父页面 test.html



    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title>    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>    <script src="jquery.nicescroll.min.js"></script></head><style>    .iframe_page{        width: 300px;        height: 260px;        background-color: #dfdfdf;    }    .iframe_page #myFrameId{        width: 280px;        height: 240px;        background-color: #adb9cd;        border: 3px dashed #cc9797;    }</style><body style="scrollbar-base-color:red">    <!-- 嵌入 iframe 模块 -->    <div class="iframe_page">        <iframe id="myFrameId" src="inner_page.html"></iframe>    </div>    <script>        $("#myFrameId").niceScroll({            cursorcolor: "#E62020",   //滚动条颜色            cursoropacitymax: 0.5, //滚动条透明度            touchbehavior: false,            cursorwidth:"5px",            cursorborder:"0",            cursorborderradius:"5px"        });    </script></body></html>


    运行结果如下:

      




    5. iframe 父页面调用子页面
    方法1: iframe标签定义了 id 属性,eg: <iframe id="myIframeId"></iframe> , 则 iframe 页面 调用子页面方法,可使用document.getElementById(‘myIframeId‘).contentWindow.***(); /* 1. myIframeId: 为 属性 id 的值  * 2. ***()方法 写在 子页面(即 src 链接的文件)中*/方法2: iframe标签定义了 name 属性,eg:<iframe name="myIframeName"></iframe> ,则 iframe 页面调用子页面方法,可使用 myIframeName.window.***() /* 1. myIframeName: 为 属性 name 的值  * 2. ***()方法 写在 子页面(即 src 链接的文件)中*/

    举例: 主页面(test.html -- 同时定义了 id 和 name)和子页面(inner_page.html )具体内容如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Title</title>
    </head>

    <style>
    .iframe_page{
    width: 400px;
    height: 260px;
    background-color: #dfdfdf;
    }
    .iframe_page #framePage{
    width: 300px;
    height: 200px;
    background-color: #adb9cd;
    border: 3px dashed #cc9797;
    }
    </style>

    <body>
    <!-- 嵌入 iframe 模块 -->
    <div class="iframe_page">
    <iframe name="myFrameName" id="myFrameId" src="inner_page.html"></iframe>
    </div>
    <script>
    /**
    * 父页面方法:调用子页面的方法
    */
    function callChildPage() {
    myFrameName.window.childSayHello(); //效果等价于 document.getElementById("framePage").contentWindow.childSayHello();
    }
    </script>
    </body>
    </html>

    主页面 test.html



    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head><style>    .iframe_page{        width: 400px;        height: 260px;        background-color: #dfdfdf;    }    .iframe_page #framePage{        width: 300px;        height: 200px;        background-color: #adb9cd;        border: 3px dashed #cc9797;    }</style><body><!-- 嵌入 iframe 模块 --><div class="iframe_page">    <iframe name="myFrameName" id="myFrameId" src="inner_page.html"></iframe></div><script>    /**     * 父页面方法:调用子页面的方法     */    function callChildPage() {        myFrameName.window.childSayHello();  //效果等价于 document.getElementById("framePage").contentWindow.childSayHello();    }</script></body></html>


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Title</title>
    </head>
    <body>
    <script>
    /**
    * 子页面方法: 父页面要调用的方法
    */
    function childSayHello() {
    alert(‘welcome: function in child‘);
    }
    </script>
    </body>
    </html>

    子页面 inner_page.html



    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head><body>    <script>        /**         * 子页面方法: 父页面要调用的方法         */        function childSayHello() {            alert(‘welcome: function in child‘);        }    </script></body></html>


    6. iframe 子页面调用父页面iframe src链接的子页面 调用 iframe父页面 方法,使用 window.parent.***();
    /* 1. window.parent.***() 等价于 parent.***()   //即 window 可以省略
    * 2. ***()方法 写在 父页面(即 iframe标签所在的文件)中
    */

    举例: 主页面(test.html)和子页面(inner_page.html)具体内容如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Title</title>
    </head>

    <style>
    .iframe_page{
    width: 400px;
    height: 260px;
    background-color: #dfdfdf;
    }
    .iframe_page #framePage{
    width: 300px;
    height: 200px;
    background-color: #adb9cd;
    border: 3px dashed #cc9797;
    }
    </style>

    <body>
    <!-- 嵌入 iframe 模块 -->
    <div class="iframe_page">
    <iframe id="framePage" src="inner_page.html"></iframe>
    </div>
    <script>
    /**
    * 父页面方法: 子页面要调用的方法
    */
    function parentSayHello() {
    alert(‘welcome: function in parent.‘);
    }
    </script>
    </body>
    </html>

    主页面 test.html



    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head><style>    .iframe_page{        width: 400px;        height: 260px;        background-color: #dfdfdf;    }    .iframe_page #framePage{        width: 300px;        height: 200px;        background-color: #adb9cd;        border: 3px dashed #cc9797;    }</style><body>    <!-- 嵌入 iframe 模块 -->    <div class="iframe_page">        <iframe id="framePage" src="inner_page.html"></iframe>    </div>    <script>        /**         * 父页面方法: 子页面要调用的方法         */        function parentSayHello() {            alert(‘welcome: function in parent.‘);        }    </script></body></html>


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Title</title>
    </head>
    <body>
    <script>
    /**
    * 子页面方法:用于调用父页面方法
    */
    function callParentFunc() {
    window.parent.parentSayHello(); //等价于 parent.parentSayHello();
    }
    </script>
    </body>
    </html>

    子页面 inner_page.html



    <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Title</title></head><body>    <script>        /**         * 子页面方法:用于调用父页面方法         */        function callParentFunc() {            window.parent.parentSayHello();  //等价于  parent.parentSayHello();        }    </script></body></html>


                                                                             总结 5-6,父窗口与子窗口方法调用                                             


    方法1:id 属性法1. HTML语法:<iframe id="myFrameId" src="child.html"></html>2. 父窗口调用子窗口:
       JS:document.getElementById("myFrameId").contentWindow.childMethod()
       JQuery: $(‘#myFrameId‘)[0].contentWindow.childMethod();3. 子窗口调用父窗口:window.parent.parentMethod() 或 parent.parentMethod()
    方法2:name 属性法1. HTML语法:<iframe name="myFrameName" src="child.html"></html>2. 父窗口调用子窗口: myFrameName.window.childMethod()3. 子窗口调用父窗口:window.parent.parentMethod() 或 parent.parentMethod()
    注:
    父页面要改变子页面某个标签中的值,eg:改变id="button"的文字时,可用:
      id 属性法:document.getElementById("test").value = "调用结束";
      name 属性法:myFrameName.window.document.getElementById("button").value="调用结束";
    子页面要改变父页面某个标签中的值,eg:改变id="test"的文字时,可用:
      id 属性法:
        JS:window.parent.document.getElementById("test").value = "调用结束";
        JQuery:$(window.parent.document).contents().find("#test").val("调用结束");
      name 属性法:
        parent.window.document.getElementById("button").value="调用结束";


    楼主热帖排行榜
    大奖18dj18vip社区温馨提示:
    大奖18dj18vip(www.dastanona.com)十分重视网络版权及其他知识产权的保护,针对网络侵权采取如下版权政策:
    1、大奖18dj18vip有理由相信网友侵犯任何人的版权或作品,(图文,文字,下载,视频,非法传播),大奖18dj18vip有权不事先通知即删除涉嫌侵权的作品和内容
    2、大奖18dj18vip将采取必要的网络技术手段,确认为侵权作品或内容的用户有权进行警告、屏蔽、删除的行为,尽可能的防止侵权行为的发生
    3、大奖18dj18vip影视资源均收集自互联网,没有提供影片资源存储,也未参与录制上传,若大奖18dj18vip收录的资源涉及您的版权或知识产权或其他利益,我们会立即删除
    4、大奖18dj18vip,删帖,投诉,举报,侵权,若大奖18dj18vip侵犯您的权益,附上身份及权利证明,请直接发送邮件到 kefu-sosoba@qq.com 我们将在一个工作日内删除
    soso大奖18dj18vip社区是聚合百度搜索,搜狗搜索,360搜索,新闻,教育,站长,广告,娱乐,影视,微信,网盘,营销,手机,汽车,游戏,论坛综合为一体的大型门户社区www.dastanona.com
    关闭

    大奖18dj18vip社区公告上一条 /1 下一条

    Powered by www.dastanona.com X3.4© 2013-2019 大奖18dj18vip社区 小黑屋|手机版|Archiver|地图|关于我们|腾讯云代金券|帮助中心|soso吧社区
    广告服务/项目合作: kefu-sosoba@qq.com  侵权举报邮箱: kefu-sosoba@qq.com  大奖18dj18vip建站时间:创建于2013年07月23日
    免责声明:大奖18dj18vip所有的内容均来自互联网以及第三方作者自由发布,版权归原作者版权所有,大奖18dj18vip不承担任何的法律责任,若有侵权请来信告知,我们立即删除!
    大奖18dj18vip热搜:大奖18dj18vip,搜搜,搜搜网,搜一下,搜吧,soso,sousou,快搜,soso搜搜,好搜,搜索,soso问问,搜搜问问,搜搜小说,搜搜图片,搜狗搜索,微信搜索,图片搜索,百度搜索,手机搜索,网盘搜索

    GMT+8, 2019-10-17 09:21 , Processed in 1.250000 second(s), 12 queries , Gzip On, MemCache On.

    快速回复 返回顶部 返回列表