调用window.parent.function()的时候很容易犯的一个小错误

调用window.parent.function()的时候很容易犯的一个小错误

首先,这里要注意:
1.我们调用的是window中的方法,必须要在我们能够搜索到的作用域(全局作用域)中找到,
2.如果找不到 就会报错 错误如下
window.parent.function is not a function
实例1:(得出正确的结果)
1.我们在父页面创建一个函数
在这里插入图片描述
2.第二步 我们在子页面调用一下

在这里插入图片描述
3,结果 发现 能够成功打印出window

在这里插入图片描述
我们再来看第二种情况
( f u n c t i o n ( ) . . . ) 是 (function(){...})是 (function()...)(document).ready(function(){…})的简写形式,是在DOM加载完成后调用执行的回调函数,并且只会执行一次。
1.同样的执行第一步 但 我们把声明的函数 放到回调函数中

在这里插入图片描述
2.同样在子页面中调用
3.结果发现,控制台报错
在这里插入图片描述
总结:
1.$(function())会形成局部作用域,
2.我们声明函数时,最好把其他页面也需要用到的函数 声明在全局作用域中 以便 子页面 调用

### 关于 `window.parent.postMessage` 的异常处理 在前端开发中,跨域通信是一个常见的需求。通过 `window.postMesssage()` API 可以实现父页面与 iframe 子页面之间的安全跨域通信[^1]。然而,在实际应用过程中可能会遇到一些异常情况,尤其是涉及 `window.parent.postMessage` 时。 #### 异常原因分析 当调用 `window.parent.postMessage` 出现异常时,可能的原因包括但不限于以下几点: 1. **目标窗口未定义或不可访问** 如果当前 iframe 页面无法找到其父级窗口(即 `window.parent` 不可用),则会抛出错误。这可能是由于 iframe 和父页面不在同一域名下,并且没有正确设置 CORS 或其他权限配置所致[^2]。 2. **目标原地址不匹配** 使用 `postMessage` 发送数据时,第二个参数指定了接收方的目标原地址(origin)。如果指定的 origin 参数不符合实际情况,则可能导致消息发送失败并触发异常[^3]。 3. **事件监听器缺失** 即使成功发送了消息给父页面或其他关联窗口,但如果对方没有注册相应的 `message` 事件监听器来捕获该消息,则不会有任何响应行为发生[^4]。 #### 解决方案 以下是针对上述常见问题提出的解决方案: ##### 1. 验证目标窗口是否存在 在尝试向父页面发送消息之前,应先确认 `window.parent` 是否存在以及是否可被正常访问: ```javascript if (window.parent && window !== window.top) { try { window.parent.postMessage('Hello Parent', '*'); } catch (error) { console.error('Failed to send message:', error); } } else { console.warn('No parent frame detected.'); } ``` ##### 2. 正确设定目标原地址 为了提高安全性,建议尽可能精确地提供目标站点的具体 URL 地址而非通配符 (`*`) 。例如: ```javascript const targetOrigin = 'https://example.com'; try { window.parent.postMessage({ data: 'Sample Data' }, targetOrigin); } catch (e) { console.log(e.message); // 处理任何潜在错误 } ``` ##### 3. 添加事件监听器用于接收反馈信息 确保父页面已经设置了合适的 `message` 事件处理器以便能够接收到来自子框架的消息回复: ```javascript // 在父页面上添加如下代码片段 window.addEventListener('message', function(event) { const allowedOrigins = ['http://child-domain.example']; if (!allowedOrigins.includes(event.origin)) return; console.info(`Received from child: ${event.data}`); }); ``` #### 总结 通过对以上几个方面的调整优化,基本可以有效规避大部分由 `window.parent.postMessage` 所引起的运行期错误现象。同时也要注意到现代浏览器的安全机制日益严格,因此务必遵循最佳实践指南来进行操作以免违反相关政策规定而遭到屏蔽拦截等问题影响用户体验效果。 ```javascript // 完整示例演示如何健壮地实施跨域通讯逻辑 function safePostToParent(data, targetOrigin='*') { if (!(window.parent && window !== window.top)) { throw new Error("Cannot access parent window."); } try { window.parent.postMessage(JSON.stringify(data), targetOrigin); } catch(err){ console.error("Error during posting:", err.stack || err.toString()); } } safePostToParent({ status:"ready"}, "https://parent-site.tld"); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值