zoukankan      html  css  js  c++  java
  • js控制父子页面传值(iframe和window.open)

    在html中,window对象代表浏览器中一个打开的窗口,就像我们C/S中做窗体一样,在该页的window对象就是new了一个新的窗体对象。

    就像做C/S开发一样,浏览器是一个软件,每一个网页都是它new的一个对象,对象与对象的信息交流只能通过方法(前提是在自己的对象域中,当然如果两个对象在同一个作用域中,就不用那么麻烦了,但是每一个网页都是一个对象,在本对象内部作用域去访问另一个对象,就需要有到公共的方法,并且两个对象都可以接受到的。就是在后台才会有的request和response等方法)。

    所以本节讨论的:主要是在窗体自己作用域内父子页面传值,有两点

    1. iframe是html中的一个标签,也就是window对象的一个成员(尽管它是网页),对象与成员之间的信息传递是简单的
    2. js脚本window.open(网页路径),就是window对象new了一个window对象,open实际也是window对象的成员,但是它与iframe不同的是它是一个匿名对象。

    页面传值方法:

    1. iframe

                 子页面获取父页面对象方法:window.parent

                 父页面获取子页面对象方法:window.frames[iframe对象的name值]

    2. window.open()

                 子页面获取父页面对象方法: window.opener

    参考页面:http://www.jb51.net/article/25629.htm

    代码参考:

    1.父页面代码(father.html)

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <script src="../js/jquery-1.10.2.js"></script>
     6     <title></title>
     7     <script type="text/javascript">
     8         function sayOpen()
     9         {
    10             alert("I am father(设置或获取创建当前窗口的窗口的引用)");
    11         }
    12         function sayFrame() {
    13             alert("I am father(获取对象层次中的父窗口)");
    14             
    15         }
    16         function getIframe()
    17         {
    18             window.frames["one"].showSon();
    19             window.frames["two"].showIframe();
    20         }
    21     </script>
    22 </head>
    23 <body>
    24     该页面是被创建的页面:<a href="#" onclick="window.open('son.html')">创建子页</a><br />
    25     <br />
    26     <input type="button" onclick="getIframe()" value="获取子页" />
    27     <br />
    28     <iframe name="one" frameborder="0" src="son.html">
    29     </iframe>
    30     <iframe name="two" frameborder="0" src="iframe_one.html">
    31     </iframe>
    32 </body>
    33 </html>
    View Code

    2.子页面代码

    (son.html和iframe_one.html)

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <title></title>
     6     <script type="text/javascript">
     7         function showSon() {
     8             alert("I am son");
     9         }
    10     </script>
    11 </head>
    12 <body>
    13     <input type="button" onclick="window.opener.sayOpen()" value="创建页单击事件" /><br />
    14     <input type="button" onclick="window.parent.sayFrame()" value="Iframe页单击事件" /><br />
    15     
    16 </body>
    17 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <title></title>
     6 
     7     <script type="text/javascript">
     8         function showIframe() {
     9             alert("I am iframe");
    10         }
    11     </script>
    12 
    13 </head>
    14 <body>
    15     我是子页iframe
    16 </body>
    17 </html>
    View Code

    iframe标签常用设置:

    <iframe height="300px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" src="../../../EFM/Model.aspx" style="overflow-x:visible;overflow-y:visible"></iframe> 

  • 相关阅读:
    行为型模式续(中介者模式 + 解释器模式)
    行为型模式下<迭代器模式、访问者模式、备忘录模式>
    行为型模式中<职责链模式、状态模式、观察者模式>
    下载vuejs,Hello Vue(vscode)
    node.js运行配置(vs code非控制台输出)
    node.js环境配置(windows系统)
    玩转visual studio系列之类设计图
    xml基础之二(XML结构【2】)DTD文档模版
    xml基础之二(XML结构【1】)
    XML的基础之一(概念和语法)
  • 原文地址:https://www.cnblogs.com/wykLog/p/4223923.html
Copyright © 2011-2022 走看看