在Iframe中调用子页面的Js函数

简介:

在Iframe中调用子页面的Js函数


调用IFRAME子页面的JS函数

说明:假设有2个页面,index.html和inner.html。其中index.html中有一个iframe,这个iframe的src指向inner.html。 
我们现在要做的就是: 
1.在index.html中调用inner.html上的一个js方法 
2.在inner.html中调用index.html上的一个js方法 

实现代码如下: 

index.html 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< html
< head
< script  type = "text/javascript"
function ff(){ 
alert(">>this is index's js function  index.html"); 
</ script
</ head
< body
< div  style = "background: lightblue;"
This is index page. 
< input  type = "button"  value = "run index's function"  onclick = "ff();"  /> 
< input  type = "button"  value = "run inner page's function"  onclick = 'window.frames["childPage"].sonff();'  /> 
</ div
< iframe  id = "childPage"  name = "childPage"  src = "inner.html"  width = "100%"  frameborder = "0" ></ iframe
</ body
</ html >


inner.html 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< html
< head
< script  type = "text/javascript"
function sonff(){ 
alert(">>this is inner page's js function"); 
</ script
</ head
< body
< div  style = "background: lightgreen;"
This is inner page. 
< input  type = "button"  value = "run index's function"  onclick = 'parent.window.ff();'  /> 
< input  type = "button"  value = "run inner page's function"  onclick = "sonff();"  /> 
</ div
</ body
</ html >




wKioL1SXvcOyeoivAAIcaM6ZJwA453.jpg



来源:

http://blog.163.com/zhao_jinggui/blog/static/169620429201010304751722/




JavaScript跨域脚本调用(iframe方式)

http://www.cnblogs.com/guohui/archive/2012/02/24/2366860.html








   本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1592620,如需转载请自行联系原作者




相关文章
|
13天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
15天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
24天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
21 4
|
23天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
14 2
|
26天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
22 5
|
25天前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
19 3
|
27天前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
|
27天前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
|
29天前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
16 3
|
30天前
|
JavaScript 前端开发
在JS中如何声明一个函数
在JS中如何声明一个函数
24 2