在iframe中调用js父页面和子页面方法

最新推荐文章于 2023-04-26 10:57:07 发布
最新推荐文章于 2023-04-26 10:57:07 发布
阅读量2.3k 收藏
点赞数
分类专栏： iframe 文章标签： iframe button function 百度

在iframe中调用父页面和子页面js方法：

今天朋友问我：a页面用iframe引入b页面，而此时要在a页面怎么调用iframe所引入b页面里的方法，很熟悉，但就是忘记了，后来百度下，才晓得，主要通过window.frames["name属性"].方法名（），也就是iframe中的name属性，so easay……b页面调用a页面中的方法略过看代码吧

index.html

<html>
<head>
<script type="text/javascript">
function ff(){
alert(">>this is index's js function");
}
</script>
</head>
<body>
<div style="background: lightblue;">
<input type="button" value="index" οnclick="ff();" />
<input type="button" value="inner" οnclick='window.frames["childPage"].ff();' />
</div>
<iframe id="" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
</body>
</html>

inner.html

<html>
<head>
<script type="text/javascript">
function ff(){
alert(">>sdfdsdfdsfdsfsdfthis is inner page's js function");
}
</script>
</head>
<body>
<div>
<input type="button" value="index" οnclick='parent.window.ff();' />
<input type="button" value="inner" οnclick="ff();" />
</div>
</body>
</html>

yiluoAK_47
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【24届数字IC秋招总结】提前批面试经验1——小米、百度昆仑芯、长鑫存储
qq_42135020的博客
04-09 474
提前批面试公司：小米、百度昆仑芯、长鑫存储。
js如何调用iframe页面里的方法
hunt_er的博客
08-29 8485
在写页面时常常需要弹出iframe页面，而iframe页面的内容是另一个页面，比如，弹出iframe的里面是一个表单（另一个页面），这样在父页面怎样调用子页面的方法呢？ 经过一番摸索，发现采用如下js即可成功调用 //用widow属性获取iframe的dom对象的name，得到窗口对象 var iframeWin = window[$(iframe)[0]['name']]; iframeWin.check(); //check()即子页面的方法，和子页面调用规则一样 总结就是两条， 1.
调用iframe中方法的方法
总柴的博客
07-29 3996
调用iframe中方法的方法 代码简单，一看就会： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0
iframe 父页面传值给子页面
yuyu_2019的博客
06-18 3676
父页面 <body> 父级：A页面<br/><br/> <button id="children_button">传值给子元素 </button> <iframe src="http://www.genetek.cc/iframe/b.html" width="500px" height="200px" id="iframe"></iframe> <script>
iframe中子父窗口互调的js方法
weixin_30498807的博客
08-31 1504
一、父窗口调用iframe子窗口方法1、HTML语法：<iframe name="myFrame" src="child.html"></iframe>2、父窗口调用子窗口：myFrame.window.functionName();3、子窗品调用父窗口：parent.functionName();简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行...
在父页面调用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父子兄弟之间调用传值(contentWindow && parent)
07-10 472
iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法） 主页面调用iframe； iframe页面调用主页面； 主页面的包含的iframe之间相互调用；   主要知识点 1：document.getElementById("ii").contentWindow 得到iframe对象后，就可以通过contentWindow得到iframe包含页面的w
iframe的使用及方法调用
森海北屿 ღ
12-22 1万+
&amp;amp;amp;amp;lt;iframe&amp;amp;amp;amp;gt; 标签规定一个内联框架（即行内框架)。被用来在当前 HTML 文档中嵌入另一个文档。所有的主流浏览器都支持&amp;amp;amp;amp;lt;iframe&amp;amp;amp;amp;gt;标签。 1、常用属性： 属性 值 描述 name frame_name 规定 iframe 的名称 src URL 规定在 ifr
iframe页面相互调用方法
韭菜的故事
07-25 1万+
最近的项目中嵌入了外部的iframe，想跨域调用自己页面的方法，点击iframe中的返回按钮，返回到父级的上一级页面，因为是自己的项目是单页应用，所以无法直接使用window.location.href，这个需求让我头疼了两天（包括衍生出来的问题），解决了这个问题之后我决定总结一下，首先从简单的开始： 基本概念： window.self: 当前窗口自身的引用 window.parent: 上...
vue项目中，调用iframe子网页中的方法 和在iframe子页面中调用vue父页面中的方法。
HeavenPeakMan的博客
04-26 1817
可以看到，调用子页面方法的关键在于获取到iframe元素对象后的contentWindow属性，所以这里使用了$refs ，如果使用dom方法获取也是可以的。targetOrigin为指定哪些窗口能接收到消息事件，可以为’*’，但是这样很不安全，建议根据实际项目精确匹配。而父页面则只需要添加事件监听器，在回调中执行需要执行方法或者使用参数。message为需要传递的信息，'我是父页面中的方法！
父窗口调用iframe子窗口方法
03-14
NULL 博文链接：https://terryang.iteye.com/blog/292913
Javscript调用iframe框架页面中函数的方法
09-04
主要介绍了Javscript调用iframe框架页面中函数的方法,可实现iframe之间传值或修改值,是非常实用的技巧,需要的朋友可以参考下
iframe中子父类窗口调用JS的方法及注意事项
10-23
本文给大家介绍iframe中子父类窗口调用JS的方法及注意事项，介绍的超详细，需要的朋友快来学习下
iframe子父页面调用js函数示例
10-26
iframe子页面调用父页面js函数及iframe父页面调用子页面js函数在实际项目中都是很实用的，下面有个不错的示例，感兴趣的朋友可以了解下
js中iframe调用父页面的方法
01-19
本文实例讲述了js中iframe调用父页面的方法。分享给大家供大家参考。具体实现方法如下： 子页面调用父页面的方法在js中很容易实现。我们只需要在主页面加个函数，然后在子页面通过window.parent.方法()即可实现了 ...
Jquery调用iframe父页面中的元素及方法
11-24
二、在iframe中调用父页面中定义的方法和变量： parent.method parent.value 三、实例 父页面： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._...
2024年全球嵌入式配电盘行业总体规模、主要企业国内外市场占有率及排名.docx
最新发布
04-15
2024年全球嵌入式配电盘行业总体规模、主要企业国内外市场占有率及排名
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、付费专栏及课程。

余额充值