从父页面获取iframe中变量

最新推荐文章于 2024-02-01 22:24:47 发布
原创 最新推荐文章于 2024-02-01 22:24:47 发布 · 350 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #jquery

本文介绍两种获取iframe内容窗口的方法：原生JS写法与jQuery写法。重点在于使用contentWindow而非contentDocument，并建议同时设置iframe的id与name属性。

1.原生js写法
var win = document.getElementById(“testiframe”).contentWindow;
或//var win=window.frames[“testiframe”];//必须为iframe指定name属性
var value = win.varName;

2.jquery写法
image.png

注意：
是contentWindow，不是contentDocument，看到很多资料写错了
iframe最好同时指定id与name属性

如何从父页面调用 iframe 中的 JavaScript 代码
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
11-14 1252
然而，有时候我们需要从父页面与iframe内的内容进行交互，比如调用iframe中的JavaScript函数。在Web前端开发中，iframe 是一个强大的工具，正确地使用它可以显著提升应用的性能和用户体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。当 iframe 和父页面位于不同的域名时，直接调用 iframe 中的函数会受到同源策略的限制。除了从父页面调用 iframe 中的函数，我们也可以从 iframe 中调用父页面中的函数。
iframe子页面与父页面在同域或不同域下的js通信
10-25
父页面可以直接访问iframe中的window对象来调用其中的方法和属性，同样iframe也可以通过访问parent对象来调用父页面的方法和属性。例如，父页面可以使用“myFrame.window.childMethod();”来调用iframe中的方法，而...
Iframe获取父页面的变量和控件
05-31
子页面获取父页面的方法，变量，标签等子页面获取父页面的方法，变量，标签等
JavaScript实现IFrame子窗口调用父窗口的全局变量
12-31
JavaScript实现IFrame子窗口调用父窗口的全局变量
js取得html iframe中的元素和变量值
10-25
想要取得iframe中的元素和js变量值，不能用$(document).ready()方法，而是要用$("#iframeId").load()方法
父页面内获取获取iframe内的变量或者是获取iframe内的值
weixin_34378969的博客
11-26 3454
前提：页面不可跨域访问，必须同一域名下，否则返回值为空 父页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
获取iframe里面的变量
热门推荐
zhengxiangwen的专栏
10-28 1万+
var tree = document.getElementById('projectIframe').contentWindow.tree;
Jquery调用iframe父页面中的元素及方法
11-24
在网页开发中，有时我们需要在`iframe`中与父页面进行交互，比如调用父页面中的元素或执行父页面的方法。本文将详细讲解如何使用jQuery实现这一功能。 首先，我们来了解一下`iframe`的基本概念。`iframe`（Inline ...
js获取iframe中的window对象的实现方法
10-22
在JavaScript中，`iframe`是一种常用的网页嵌入技术，它允许我们在一个页面中加载另一个页面。在处理跨域、模块化开发或者复杂交互时，我们可能需要获取到`iframe`内的`window`对象，以便与`iframe`内容进行通信或...
父页面获取 子页面iframe里的变量
夜晓星的博客
01-24 3192
&lt;iframe id="XXX" scrolling="auto" frameborder="0" width="100%" height="570px" src="XXX"&gt; &lt;/iframe&gt;    var 变量名称= document.getElementById('XXX').contentWindow.变量名称;
iframe父子页面互相调用方法、获取变量、获取元素
lixiaonaaa的博客
12-22 4281
每次iframe父子页面交互的时候总是现查，总也记不住，所以今天来详细记载一下。以下均为jquery 写法。 1、iframe子页面调用父页面 （1）方法 parent.func() （2）变量 parent.value （3）jquery元素 $("div",parent.document) 2、父页面调用iframe子页面 （1）方法 $("#childrenIframeId").eq(0)[0].contentWindow.func(); （2）变量 $("#ch
iframe子父页面变量、标签、方法的调用
weixin_38283640的博客
10-28 1197
iframe子父页面变量、标签、方法的调用
HTML父页面调用iframe子页面中js变量和方法
程序猿开发日志【学习永无止境】
12-20 9464
获取子页面dom:$("iframe").eq(0).contents().find("selector") 调用子页面js变量和方法:$("iframe").eq(0)[0].contentWindow.method() 以jquery为例，假如子iframe为 obj = $("iframe").eq(0)现在obj为jquery对象 获取子页面dom // selector为
get DOM,Function,JsVar of ifram
小菜 ...
07-26 141
ie&firefox document.getElementById("frameId").contentWindow.varName; document.getElementById(" frameId ").contentWindow.functionName(); document.getElementById(" frameId "...
父页面跨域获取iframe页面的值
pirenyu2701的博客
02-01 758
使用`window.postMessage`可以在跨域环境下实现安全、有效的数据通信，这是实现父页面与iframe间通信的最好方法之一。最推荐和最安全的方法是使用`window.postMessage`方法，这是HTML5引入的一种安全的跨源通信方式。- **安全性：**务必检查`event.origin`，并验证它是否来自你预期的源，以避免安全漏洞。- **性能：**考虑到性能和资源利用，不应该过度依赖`postMessage`进行频繁的跨域通信。3. **父页面接收回复消息：**
获取iframe 子页面的js变量值
12-02 798
方法只有一种：  步骤： 1、获取iframe节点 2、获取iframe中的变量 示例 a.html b.html  var y='1'; 在a.html中获取y，则可以通过以下方式 document.frames['x'].y  //先获取frame,在获取y
如何操作iframe父页面中的元素、方法、变量
qiankui的博客
05-27 1416
方法 1. 在iframe中查找父页面元素的方法： jQuery的方法：$("#id",window.parent.document) 原生的方法：window.parent.document.getElementById("id"); //有时候iframe会嵌套好几层，那么嵌套两层时就是： window.parent.parent.document.getElementById("i...
父元素获取iframe的变量
weixin_54471116的博客
06-22 207
父元素获取iframe的变量 子元素代码 // An highlighted block parent.postMessage("要传递的变量名", '*') 父元素代码 // An highlighted block function receiveMessage (event) { console.log(event.data);//data就是接收的值 } window.addEventListener('message', receiveMessage, false); ...
父子iframe 相互访问元素和变量
qq_31683775的博客
10-30 262
父中: <input id="username"type="text" /> <scripttype="text/javascript"> var count = 1; </script> 子iframe中: <scripttype="text/javascript"> alert(window.parent.count); //获取父中的js变量 alert($("#username", window.parent.document));/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值