IFrame下子页面调用父框架的JS方法

本文介绍了如何在HTML页面的父框架中访问子框架的JavaScript方法,并提供了实例演示子页面如何刷新父页面以及访问父页面中的对话框和JS方法。
转载
parent.frames["frameName"].window.functionName();
frameName:IFrame的ID;
funtionName:子页面中JS方法名;
 
 
 
var obj = parent.frames["frameName"].window;
在父页面访问子页面中某个控件如:obj.document.getElementById('clientID')
 
 
 
子页面刷新父页面:top.window.location.replace(Url);
 
 
 
$(window.frames["iframeChild"].document).find("iframe[name='list']").attr("src");
意思是找到name=iframeChild的frame并且找到这个iframe中name=list的元素。
 
 
例子:

 子页面访问父页面的对话框:parent.document.saveform.userName.value='${userName}';
子页面刷新父页面:        parent.document.location.reload();
子页面访问父页面中js方法: parent.parent.checkFunc();



 
出自:
http://mybloggers.blog.163.com/blog/static/100386509200810553548856/


项目中测试,子页面访问父框架js

parent.parent.父框架方法名(参数);


<think>首先,用户的问题是:“我想查找iframe页面调用页面函数的方法 请问iframe页面调用页面函数的实现方法”。这是一个关于JavaScript中iframe操作的查询。 根据系统级指令: - 所有行内数学表达式必须使用$...$格式,但这里没有数学内容,所以不需要。 - 独立公式使用$$...$$,但同样不适用。 - LaTeX语法正确,但这里主要是代码。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识,例如[^1]。 - 回答结构清晰,帮助用户逐步解决问题。 - 参考站内引用:引用[1]、[2]、[3]提供了相关信息,我需要整合这些。 用户提供的引用: - 引用[1]:页面调用页面方法。 - 引用[2]:页面调用页面方法。 - 引用[3]:iframe页面调用,提到在Chrome中的问题。 用户的需求是:页面调用页面函数的方法。 我的回答需要: 1. 解释如何实现页面调用页面函数。 2. 使用中文。 3. 结构清晰,逐步解释。 4. 在引用内容后添加引用标识。 5. 生成相关问题。 关键点: - 在页面中,通过`window.parent`或`window.top`访问页面的window对象。 - 然后调用页面的函数。 - 注意跨域问题(如果iframe来自不同源)。 - 引用[2]和[3]提供了具体代码示例。 步骤: 1. **介绍基本方法**:使用`window.parent`在页面调用页面的函数。 2. **提供代码示例**:基于引用[2]和[3]。 3. **处理潜在问题**:如跨域问题,浏览器兼容性(引用[3]提到Chrome在file协议下的问题)。 4. **添加引用标识**:在引用内容后加[^2]等。 5. **生成相关问题**:在最后添加相关问题。 最终回答结构: - 开头简要介绍。 - 详细步骤和代码。 - 注意事项。 - 相关问题。</think>### iframe页面调用页面函数的实现方法 在Web开发中,iframe允许嵌入其他页面页面调用页面函数是一个常见需求。这主要通过JavaScript的`window.parent`或`window.top`对象实现,它们提供了访问页面window对象的途径。下面我将逐步解释实现方法,并解决潜在问题。 #### 步骤1:基本实现方法页面中,使用`window.parent`直接调用页面定义的函数: - **页面代码**:定义一个函数,例如`parentFunction()`。 - **页面代码**:通过`window.parent.parentFunction()`调用该函数。 示例代码: ```html <!-- 页面(parent.html) --> <script> function parentFunction() { alert('页面成功调用页面函数!'); } </script> <iframe src="child.html" id="childFrame"></iframe> ``` ```html <!-- 页面(child.html) --> <script> // 调用页面的parentFunction window.parent.parentFunction(); // 直接执行页面函数 </script> ``` 此方法简单高效,但需确保页面函数已定义[^2]。 #### 步骤2:处理浏览器兼容性问题 不同浏览器可能对`window.parent`的支持有差异: - **现代浏览器(Chrome、Firefox、Edge)**:在HTTP协议下工作正常。 - **本地文件协议(file://)问题**:在Chrome 5+中,`window.parent`在本地文件协议下可能失效(需部署到HTTP服务器)。 解决方案:使用`window.top`替代,它更稳定: ```javascript // 页面调用页面函数 window.top.parentFunction(); // 兼容性更好 ``` 引用[3]提到,此方法在HTTP协议下支持所有主流浏览器[^3]。 #### 步骤3:处理跨域问题 如果iframe页面页面不同源(如不同域名),浏览器会阻止跨域访问: - **错误示例**:`Uncaught DOMException: Blocked a frame from accessing a cross-origin parent.` - **解决方案**: 1. **使用postMessage API**:通过消息传递机制安全通信。 ```javascript // 页面 window.addEventListener('message', (event) => { if (event.data === 'callParentFunction') { parentFunction(); } }); // 页面 window.parent.postMessage('callParentFunction', '*'); // 发送消息 ``` 2. **设置同源策略**:确保页面页面在同一域名下。 #### 注意事项 - **函数定义时机**:确保页面函数在页面调用前已加载(例如,在DOMContentLoaded事件后执行)。 - **安全风险**:避免使用`*`通配符在postMessage中,应指定目标域名。 - **框架兼容**:如使用jQuery,可参考`$(window.parent.document)`,但原生JavaScript更推荐[^3]。 通过以上方法,您可以轻松实现页面调用页面函数。如果遇到问题,请检查浏览器控制台错误日志。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值