利用js调用iframe中父页面/子页面中的JavaScript方法

最新推荐文章于 2024-02-02 00:00:00 发布
最新推荐文章于 2024-02-02 00:00:00 发布
阅读量596 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nameyuxiang/article/details/27203247
版权
说明：假设有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.<html>
2.<head>
3.<script type="text/javascript">
4.function ff(){
5.alert(">>this is index's js function");
6.}
7.</script>
8.</head>
9.<body>
10.<div style="background: lightblue;">
11.This is index page.
12.<input type="button" value="run index's function" οnclick="ff();" />
13.<input type="button" value="run inner page's function" οnclick='window.frames["childPage"].ff();' />
14.</div>
15.<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
16.</body>
17.</html>


inner.html

1.<html>
2.<head>
3.<script type="text/javascript">
4.function ff(){
5.alert(">>this is inner page's js function");
6.}
7.</script>
8.</head>
9.<body>
10.<div style="background: lightgreen;">
11.This is inner page.
12.<input type="button" value="run index's function" οnclick='parent.window.ff();' />
13.<input type="button" value="run inner page's function" οnclick="ff();" />
14.</div>
15.</body>
16.</html>
nameyuxiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在父页面调用iframe子页面的JS方法
heartbeaty的专栏
02-18 4万+
parent function parentFunction() { alert('function in parent'); } function callChild() { child.window.childFunction(); /* child 为iframe的name属性值， 不能为id，因为在FireFox下id不能获取iframe对象 */ }
iframe调用父页面js方法_JS高级技巧
weixin_36028876的博客
12-30 6536
本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测这个问题是怎么安全地检测一个变量的类型，例如判断一个变量是否为一个数组。通常的做法是使用instanceof，如下代码所示：let data = [1, 2, 3]; cons...
在父页面调用子页面的JS方法
12-12
今天弄了一天了，终于在网上找到了解决办法 注意：问题是在父页面调用子页面的方法。。。。。 父页面：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><meta http-equiv=”Content-Type” content=”text/html; charset=utf
iframe的基本介绍与使用
热门推荐
qq_45799465的博客
03-31 4万+
一、iframe的基本介绍 二、iframe的基本使用 三、iframe的属性介绍 四、iframe注意事项 五、iframe的URL传参方法 六、iframe的postMessage（）传参方法
JS技巧：调用iframe中父页面/子页面中的JavaScript方法
小王君的府邸
12-26 248
说明：假设有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....
js iframe 父页面调用子页面方法
qq_40615333的博客
04-14 2850
iframe 父页面调用子页面方法 子页面 <script type="text/javascript"> function test(){ console.log("test") } </script> 父页面 <iframe src="./MaterialList.html" id="materialList" name="materialList" style="width:99%"></iframe> var iframe = document.
页面中使用iframe
lazy_tomato的博客
09-02 3333
综上所述：最优解是同源的情况，可以直接操作 dom，可以不借助 postMessage 直接通信。如果不同源，可以通过 postMessage，传递消息。但是需要在 iframe 中添加代码主动发送消息，外层页面监听 message 事件接受数据；
Jquery调用iframe父页面中的元素及方法
11-24
在网页开发中，有时我们需要在`iframe`中与父页面进行交互，比如调用父页面中的元素或执行父页面的方法。本文将详细讲解如何使用jQuery实现这一功能。 首先，我们来了解一下`iframe`的基本概念。`iframe`（Inline ...
iframe子父页面调用js函数示例
10-26
在实际项目中，我们经常需要实现`iframe`子页面与父页面之间的交互，比如调用彼此的JavaScript函数。本文将详细介绍如何实现`iframe`子页面调用父页面的函数，以及父页面调用子页面的函数。 1. **iframe子页面调用...
在iframe中调用js父页面和子页面方法
08-08
本篇文章将深入探讨如何在`iframe`中调用JavaScript，实现父页面与子页面之间的方法交互。 一、iframe的基本使用 在HTML中，我们可以通过`<iframe>`标签来插入一个框架，例如： ```html <iframe src="child....
iframe父页面与子页面通信及相互调用方法
09-13
"iframe父页面与子页面通信及相互调用方法"是一个重要的主题，涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面（Parent Page）**：包含`iframe`...
【HTML】深入全掌握 iframe：了解 its 技术原理、优缺点、最佳应用场景及实战指南
weixin_55846296的博客
06-08 4375
Web 应用开发中，包含其他网页的框架是很常见的需求。HTML 标签iframe提供了一个容器，可以用来嵌入其他页面，并且它自带了一些有用的特性，如调整大小、滚动等。本文将深入介绍iframe技术原理、优缺点、最佳应用场景及实战指南，希望能帮助您更好地运用 iframe，提升 Web 应用开发效率。（内嵌框架）元素是一种HTML常用元素，用于在一个HTML文档中嵌入另一个HTML文档。其实际效果是将一个文档嵌入到另一个文档中，用户在浏览器中正常浏览父文档的同时，可以看到和与子文档交互。
iframe嵌套其它网站页面及相关知识点详解
Quentin0823的博客
01-31 2万+
在一个页面中嵌套另外一个页面，就要使用到框架 标签。 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
深入探究iframe：网页嵌入的魔法盒子（上）
最新发布
你若盛开，清风自来
02-02 1404
iframe是一种HTML标签，用于在网页中嵌入另一个网页。iframe允许您在当前页面中嵌入另一个完全独立的网页，这两个网页之间可以进行交互，但它们具有独立的域名和会话。内容嵌入：iframe允许您将另一个网页嵌入到当前页面中，这可以用于在当前页面中显示广告、工具栏或其他内容。跨域交互：iframe允许您在两个不同的域名之间进行交互，这可以用于实现跨域登录、跨域数据传输等功能。页面缩放：iframe的方法可以用来调整嵌入的网页的大小。历史记录。
iframe框架标签（内嵌页面）的基本介绍
weixin_70424030的博客
07-27 1万+
iframe的作用以及使用
js如何调用iframe页面里的方法
hunt_er的博客
08-29 8741
在写页面时常常需要弹出iframe页面，而iframe页面的内容是另一个页面，比如，弹出iframe的里面是一个表单（另一个页面），这样在父页面怎样调用子页面的方法呢？ 经过一番摸索，发现采用如下js即可成功调用 //用widow属性获取iframe的dom对象的name，得到窗口对象 var iframeWin = window[$(iframe)[0]['name']]; iframeWin.check(); //check()即子页面的方法，和子页面调用规则一样 总结就是两条， 1.
iframe嵌套页面
weixin_55753367的博客
06-20 9009
HTML里有着这么一个标签 ifarme 。我们把它称做为内联框架标签。刚开始学习搭建页面的时候基本用不上，到现在自己学习做项目后才明白了这个标签的重要性。当看到标签中的 src 属性，就告诉我们可以在我们自己的网站页面加载其它的网站或者本站的其它页面内容，也就是嵌套页面。 在W3School里详细介绍： 1.支持iframe的浏览器 IE、Firefox、Chrome、Safari、Opera， 在不支持iframe的浏览器里是看不到嵌套效果的。 2.iframe的定义和用法 iframe元素会创建包含
js如何判断是否在iframe中/JQuery调用iframe父页面元素与方法
08-25
### 回答1： 可以使用以下方法来判断是否在 iframe 中： ```javascript if (window.self !== window.top) { // 在 iframe 中 } else { // 不在 iframe 中 } ``` 在 jQuery 中，可以使用 `parent` 方法来调用 iframe 父页面的元素和方法： ```javascript // 获取父页面的元素 $(parent.document).find('#elementId'); // 调用父页面的方法 parent.methodName(); ``` ### 回答2： 要判断当前页面是否在iframe中，可以使用JavaScript的window对象的top属性来判断。如果top属性等于自身window对象，那么证明当前页面不在任何iframe中；如果top属性不等于自身window对象，那么证明当前页面在一个iframe中。 示例代码如下： ```javascript if (window.top === window){ console.log("当前页面不在任何iframe中"); } else { console.log("当前页面在一个iframe中"); } ``` 要在iframe中调用父页面的元素和方法，可以使用jQuery的parent()方法或者window.parent来获取父页面的元素或窗口对象，然后通过对象的方法来进行操作。 示例代码如下： ```javascript // 使用parent()方法获取父页面元素并进行操作 $("button", parent.document).click(function(){ // 在父页面中查找<button>元素，并添加点击事件处理函数 alert("在父页面中点击了按钮"); }); // 使用window.parent获取父页面窗口对象并进行操作 window.parent.postMessage("Hello from iframe", "*"); // 向父页面发送跨域消息 ``` 注意：在跨域的情况下，使用postMessage方法向父页面发送消息时，需要指定目标窗口的origin，以保证安全性。 ### 回答3： 在JS中，可以通过window对象的top属性判断当前页面是否在iframe中。若top属性等于当前window对象本身，则表示当前页面不在任何iframe中；若top属性指向其他window对象，则表示当前页面在一个iframe中。 以下是通过JS代码判断是否在iframe中的示例： ```javascript if (window.top === window.self) { console.log("当前页面不在iframe中"); } else { console.log("当前页面在iframe中"); } ``` 当需要在iframe中的页面中调用父页面的元素或方法时，可以使用jQuery来实现。jQuery可以通过使用窗口对象的parent属性来访问父页面的元素或方法。 以下是通过jQuery调用父页面的元素或方法的示例： ```javascript // 在iframe中调用父页面的元素 var parentElement = $(parent.document).find("#elementId"); // 在iframe中调用父页面的方法 parent.myFunction(); ``` 在以上示例中，通过$(parent.document)来选择父页面的DOM元素，再通过find()方法选择特定的元素。若需要调用父页面的方法，则使用parent对象直接调用方法即可。通过这种方式，可以在iframe中与父页面进行交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值