ifram子页面与父页面的方法相互调用

parent.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Parent Page</title>
        <script language="javascript" type="text/javascript">
            function parenttest() {
                alert("这是父页面的方法!");
            }
            function btnClick() {
                document.getElementById("childframe").contentWindow.childtest();
            }
    </script>
</head>
<body>
   <div style="margin:auto;">
       <h1>This is the Parent Page.</h1>
       <input type="button" value="调用子页面的方法"  onclick="btnClick()"/>
    </div>
    <div style="margin:auto;">
       <iframe style="width:300px; height:300px;" id="childframe" src="ChildPage.html"></iframe>
    </div>
</body>
</html>

son.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Child Page</title>
    <script language="javascript" type="text/javascript">
      function childtest() {
        alert("这是子页面的方法!");
      }

      function btnClick() {
        window.parent.parenttest();
      }
  </script>
  </head>
  <body>
    <div style="margin:auto;">
      <h1>This is the Child Page.</h1>
      <input type="button" value="调用父页面的方法" onclick="btnClick()" />
    </div>
  </body>
</html>

原文地址:https://www.cnblogs.com/lgnblog/p/11010981.html

时间: 2024-10-10 18:19:39

ifram子页面与父页面的方法相互调用的相关文章

js之iframe子页面与父页面通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head> <scripttype="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.wi

iframe子页面与父页面js通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.w

js处理iframe中子页面与父页面里面对象的取得的解决方案

[1]子页面取得父页面的dom对象 parent.window.$('#id').val(""); [2]父页面取得子页面的对象 $(window.frames["iframeName"].document).find('#subjectDg').datagrid('acceptChanges'); $('#iframeId').contents().find('#id'); //***** [3]父页面调用子页面方法:reload()为自己写的子页面js方法 $(

Android中通过WebView控件实现与JavaScript方法相互调用的地图应用

在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用android方法,在这里我个人觉得有点和DWR相似. 为了让大家容易理解,我写了一个简单的Demo,具体步骤如下: 第一步:新建一个Android工程,命名为WebViewDemo(这里我在assets里定义了一个html页面). 第二步:修改main.xml布局文件,增加了一个WebView控件还有But

Android高手进阶教程(二十)之---Android与JavaScript方法相互调用!

在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用android方法,在这里我个人觉得有点和DWR相似. 为了让大家容易理解,我写了一个简单的Demo,具体步骤如下: 第一步:新建一个Android工程,命名为WebViewDemo(这里我在assets里定义了一个html页面). 第二步:修改main.xml布局文件,增加了一个WebView控件还有But

子页面与父页面互相调用对方页面的函数

1,调用子窗口中的方法: $('#rolefm')[0].contentWindow.parentSubmit(); //rolefm是iframe标签的id  parentSubmit是iframe里页面的一个方法 2,调用父窗口的方法: window.parent.window.afterSetRole(); //afterSetRole是父窗口里的方法

html中iframe子页面与父页面元素的访问以及js变量的访问

1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法 3.子页面访问父页面js变量或方法(注:父页面的js变量需为全局变量和全局方法) 子页面var var

Wex5父子页面方法相互调用

父子页面分为两种,1.windowDialog 是弹出的子页面,2.windowContainer 是内嵌的子页面! 在子页面中获取父页面的model对象 this.getParent() 或者 this.getParentModel() 可以获取到父页面的model对象,然后就可以访问父页面任意的方法和属性.直接操作父页面 在父页面中,也可以通过this.comp('windowContainer 或者 windowDialog 的Xid').getInnerModel() 获取子页面的mod

【Python】+类内部方法相互调用

1 class TestDate: 2 a = 1 3 4 # "__init__"为类的构造函数 5 def __init__(self): 6 self.a = 666 7 pass 8 9 def a_1(self): 10 print("a_1") 11 self.a_2() 12 13 def a_2(self): 14 print(self.a) 15 print("a_2") 16 17 18 if __name__ == &quo