iframe子页面js调用父页面js函数/父页面调用Iframe子页面中js方法

1、假设当前页面为a.html, iframe的src页面为b.html,其代码如下:

 1 <span class="tag"><html>
 2 <br></span><span class="tag"><head>
 3 <br></span><span class="tag"><title></span><span class="tag"></title></span><span class="tag">
 4 <br></head>
 5 <br></span><span class="tag"><body></span><span class="tag">
 6 <br>  <p></span><span class="pln">iframe页面里的js调用父级页面js函数的demo</span><span class="tag"></p>
 7 <br></span><span class="tag">  <iframe</span><span class="atn">frameborder</span><span class="pun">=</span><span class="atv">"0"</span><span class="atn">width</span><span class="pun">=</span><span class="atv">"0"</span><span class="atn">height</span><span class="pun">=</span><span class="atv">"0" </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"test" </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"b.html"</span><span class="tag">>
 8 <br>  </iframe>
 9 <br>   <p id="p_nr"></p></span><span class="tag">
10 <br></body>
11 <br></span><span class="tag"><script</span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><span class="pln">
12   function testParent</span><span class="pun">(){
13 <br>          alert(‘Parent‘);
14 <br>     }
15 <br></span><span class="tag"></script></span><span class="tag">
16 <br></html></span>

2、b.html里的页面元素为:

 1 <span class="tag"><span class="tag"><html>
 2 <br></span><span class="tag"><head>
 3 <br></span><span class="tag"><title></span><span class="tag"></title></span><span class="tag">
 4 <br></head>
 5 <br></span><span class="tag"><body></span>
 6 <br><script </span><span class="atn">type</span><span class="pun">=</span><span class="atv">‘text/javascript‘</span><span class="tag">></span><span class="pln">
 7     window</span><span class="pun">.</span><span class="pln">parent</span><span class="pun">.</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">‘p_nr‘</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="str">‘内容‘</span><span class="pun">;//控制父级页面的元素</span><span class="pln">
 8     window</span><span class="pun">.</span><span class="pln">parent</span><span class="pun">.testParent</span><span class="pun">();//调用父级页面的Js函数
 9 <br></span><span class="tag"></script>
10 <br></span>

二、父页面调用Iframe页面中js方法

1、test.js内容

function testJs()

{

alert(‘JS‘);

}

2、Children.html内容

<html>

<head>

<title></title>

<script type="text/javascript" src="test.js"></script>

</head>

<body>

</body>

</html>

3、parent.html内容

<head>

<title></title>

<script type="text/javascript" >

var obj=self.frames[0];

obj.testJs();

</script>

</head>

<body>

</body>

</html>

时间: 2024-08-02 22:51:35

iframe子页面js调用父页面js函数/父页面调用Iframe子页面中js方法的相关文章

用js同时封装两个函数,任意调用不同格式选项卡

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul,ol{ list-style: none; } .tab{ width: 500px; height: 300px; margin: 0 auto; position: relative; ov

Vue父组件如何调用子组件(弹出框)中的方法的问题

如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的实例,可以理解为绑在了DOM结构上那如果我偏偏想调用的是这个子组件(弹出框)中的方法,但又不想要弹出框显示,怎么办呢?解决方法:把v-if换成v-show,这样DOM元素会一直存在于父组件中,子组件的方法也就能调用了 原文地址:https://www.cnblogs.com/zsg88/p/1099

(转载)你好,C++(27)在一个函数内部调用它自己本身 5.1.5 函数的递归调用

你好,C++(27)在一个函数内部调用它自己本身 5.1.5 函数的递归调用 5.1.5 函数的递归调用 在函数调用中,通常我们都是在一个函数中调用另外一个函数,以此来完成其中的某部分功能.例如,我们在main()主函数中调用PowerSum()函数来计算两个数的平方和,而在PowerSum()函数中,又调用Power()函数和Add()函数来计算每个数的平方并将两个平方加和起来成为最终的结果.除此之外,在C++中还存在另外一种特殊的函数调用方式,那就是在一个函数内部调用它自己本身,这种方式也被

你好,C++(27)在一个函数内部调用它自己本身 5.1.5 函数的递归调用

5.1.5 函数的递归调用 在函数调用中,通常我们都是在一个函数中调用另外一个函数,以此来完成其中的某部分功能.例如,我们在main()主函数中调用PowerSum()函数来计算两个数的平方和,而在PowerSum()函数中,又调用Power()函数和Add()函数来计算每个数的平方并将两个平方加和起来成为最终的结果.除此之外,在C++中还存在另外一种特殊的函数调用方式,那就是在一个函数内部调用它自己本身,这种方式也被称为函数的递归调用. 函数的递归调用,实际上是实现函数的一种特殊方式.当递归函

js jquery 关闭弹出页面 并刷新父页面(window.opener)

function Closepage() { if (window.opener && !window.opener.closed) { window.parent.opener.location.reload(); } window.close(); return false; } 其它方法可借鉴: window.opener用法 http://www.cnblogs.com/zhangzt/archive/2009/12/24/1631253.html window.opener 实际

iframe与父页面中JS执行顺序控制

同事遇到了一个问题: 父页面中有几个iframe,初衷是父页面的JS通过AJAX获取数据,然后用于初始化iframe页面,可以结果却是有的iframe页面却不能获得数据. [问题根源] 父页面在加载iframe的时候,也会执行JS代码,二者执行完成先后顺序并不可控,而iframe却要使用JS获取的数据,导致在iframe初始化时,没有得到数据,也就无法初始化iframe页面了. [解决办法] HTML代码中,iframe的src属性不赋值.父页面的JS在AJAX请求成功之后,再为iframe的s

[Winform-WebBrowser]-在html页面中js调用winForm类方法

在winform项目中嵌入了网页,想通过html页面调用后台方法,如何实现呢?其实很简单,主要有三部: 1.在被调用方法类上加上[ComVisible(true)]标签,意思就是当前类可以com组件的形式供外包调用 2.在webBrowser控件中设置可被html页面调用的类即:webBrowser1.ObjectForScripting = this;前端即可通过window.external访问this对象 3.html页面调用后台方法:window.external.方法名(); 此处的w

C#后台程序与HTML页面中JS方法互调

此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中. 2.窗体代码添加 using System.Runtime.InteropServices;//和Html页面交互使用 在类的上一行添加 [ComVisible(true)]//和Html页面交互使用 在类的构造其中添加 this.webB.ObjectForScripting = this;

C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)

此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中. 2.窗体代码添加 using System.Runtime.InteropServices;//和Html页面交互使用 在类的上一行添加 [ComVisible(true)]//和Html页面交互使用 在类的构造其中添加 this.webB.ObjectForScripting = this;