zoukankan      html  css  js  c++  java
  • 在子页面操作父页面元素和iframe说明

    实现功能:在子页面操作父页面元素。

      在实际编码的过程中,大家一定有这种需求:在父级页面有一个<iframe scrolling='auto'></iframe>内联框架,而我们需要在iframe的子页面里对父页面的元素进行操作。下面我就实际代码展示一下。

    父级页面

    <div id="fatherHtml">
        <div id="button1"><h2>这是父级页面</h2></div>
        <iframe scrolling='auto'></iframe>
    </div

    子级页面

    <html>
    <head></head>
    <body>
    <div>
         <div>这是子页面</div>
         <button id="clickButton">点击我</button>
    </div>
    </body>
    </html>
    <script>
    $(function(){
        window.parent.$("#button1").click(function(){//window.parent.$("#button1")就获取到了父级页面的div元素
            $.ajax({
                url : '<%=serverIp%>/webcons.do?method=cancellationAccountBiocuration',
                type: "get", 
                dataType:"json",
                success:function(data) {
                    window.parent.$("body").css("overflow","scroll");
                    window.parent.$("#mask").remove();
                    window.parent.$("#middleDiv").remove();
                }
            })
        })
    })
    </script>

     iframe参数说明

      src :  src 属性规定嵌入在 <iframe> 中的文档的地址。

               语法 :<iframe src="URL">

          URL可能的值:

             1、绝对 URL - 指向另一个网站(比如 src="http://www.example.com/default.htm");

             2、相对 URL - 指向网站中的一个文件(比如 src="default.htm")

      frameborder:规定是否显示 <iframe> 周围的边框。

               可能的值:

              1  :默认,开启边框;

              2:关闭边框

      scrolling :规定是否在 <iframe> 中显示滚动条。默认地,如果内容超出了 <iframe>,滚动条就会出现在 <iframe> 中。

           语法:<iframe scrolling="auto|yes|no">

          可能的值:

            auto:在需要的情况下出现滚动条(默认值)。

            yes:始终显示滚动条(即使不需要)。

            no:从不显示滚动条(即使需要)。

     window.parent 说明

      功能:返回父窗口。

      语法:window.parent

      注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。

      在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。

      示例:

      

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <head>
    <script>
    function openWin(){
        window.open('','','width=200,height=100');
        alert(window.parent.location);
    }
    </script>
    </head>
    <body>
    
    <input type="button" value="打开窗口" onclick="openWin()">
    
    </body>
    </html>

      示例效果:

     

     
  • 相关阅读:
    BOM和DOM
    前端CSS
    前端HTML
    索引 创建用户和授权 锁 事务
    多表查询 Naricat pymysql
    外键关联的修改 级联 修改表行记录的操作
    表的基础数据类型 MySQL的mod设置 表的约束
    数据库初识及操作命令
    LINUX 下LAMP之源码环境部署
    Nginx负载均衡配置实例详解【原】
  • 原文地址:https://www.cnblogs.com/jichuang/p/8079327.html
Copyright © 2011-2022 走看看