`
yixiandave
  • 浏览: 140828 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

iframe内函数调用注意事项

    博客分类:
  • js
阅读更多
今天写一个前端应用的时候发现iframe内的函数无法调用,直接使用jquery的方法也无法得到iframe内部的元素,特此记录

iframe内的引用页面包含的js,包括<script>引用的额外js文件,在主页面都是无法直接访问的。包括iframe嵌套的页面,在上一级iframe和下一级iframe之间的function也互相无法直接访问
调用下一级函数方法(这里使用jQuery选择器仅仅为了简化代码):
$("iframe")[0].contentWindow.functionName();

得到下一级iframe内的元素也需要做处理
$($("iframe")[0].contentWindow.document).find(".x")


调用父级的方法则简单的多:
parent.functionName();
分享到:
评论

相关推荐

    js实现iframe跨页面调用函数的方法

    总结来说,通过`window.frames`和`parent`属性,我们可以实现JavaScript在iframe跨页面之间的函数调用。这在构建交互性强的Web应用时非常有用,如动态加载内容、通信传递数据等。理解并掌握这种技术对于提升Web开发...

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

    四、跨域通信注意事项 1. `postMessage`的安全性:传递的数据会被同源策略限制,只能被指定的源接收。`event.origin`用于检查消息来源。 2. 事件处理:为防止多次触发,可以使用`removeEventListener`移除事件监听器...

    iframe中子父类窗口调用JS的方法及注意事项

    本文将详细介绍如何在iframe中实现子窗口与父窗口间的JavaScript方法调用以及在操作过程中需要注意的事项。 首先,了解基本的iframe标签结构对于掌握子父窗口间的JS调用非常重要。一个简单的iframe标签可能如下所示...

    js中iframe调用父页面的方法.docx

    6. **跨页面通信的注意事项** - 确保发送和接收消息的页面都正确设置了`origin`(发送方的`origin`应与接收方的`addEventListener`中的`origin`匹配)。 - 使用`event.source`检查消息是否来自预期的`iframe`。 -...

    iframe父页面与子页面互相调用

    注意事项 - **跨域问题**:如果父页面和子页面不在同一个域下,则无法进行上述的DOM操作,因为这违反了浏览器的同源策略。解决方法是通过JSONP、CORS等方式实现跨域数据交换。 - **命名规范**:在使用`window....

    jQuery操作iframe中js函数的方法小结

    jQuery操作iframe中js函数的方法主要包括了对iframe元素的操作、对父页面元素的操作、在主页面中调用iframe的js函数以及在jQuery中调用iframe的js函数四个部分,每一个部分都有其特定的方法和注意事项。 首先,操作...

    iframe跨域通信解决方法

    5. **注意事项** - 确保所有参与通信的页面都加载了相同的`crossUtils.js`文件版本。 - 当发送包含敏感数据的消息时,务必注意安全性,避免跨站请求伪造(CSRF)攻击。 - 测试时,建议使用控制台输出来检查消息...

    android中js与java间函数相互调用demo,支持中文传参,无乱码

    本教程将详细讲解如何在Android中实现JS与Java的双向函数调用,以及如何处理中文参数传递时的乱码问题。 1. **WebView组件** Android中的`WebView`组件是实现JavaScript与Java交互的基础。`WebView`可以加载HTML、...

    iframe自适应高度(DOM动态操作)

    #### 注意事项 - **跨域限制**:当`iframe`加载的内容与主页面不在同一域名下时,由于同源策略的限制,可能会出现安全问题,导致无法访问`iframe`内部的内容。 - **性能考虑**:频繁地调用`reinitIframe`函数会增加...

    iFrame 自动调整高度

    3. **注意事项**: - 在跨域情况下,可能无法访问`&lt;iframe&gt;`内部文档的信息,此时会抛出安全异常。可以通过设置服务器端的CORS策略解决此问题。 - 需要确保`&lt;iframe&gt;`的`id`属性与脚本中的`"iyxzl"`一致。 #### ...

    iframe 自适高度 JS控制代码实现

    #### 注意事项 - **跨域问题**:如果`iframe`加载的内容与外部页面不在同一个域下,那么由于同源策略的限制,可能无法获取到内部页面的高度信息。此时需要通过其他方法(如使用`postMessage`进行通信)来实现自适应...

    自动改变iframe的高度

    #### 四、注意事项 - **兼容性问题:**虽然此方法在大多数现代浏览器中有效,但在IE等旧版浏览器中可能无法正常工作。因此,在实际项目中需要进行充分的测试。 - **性能考虑:**频繁调用`setWinHeight`函数可能会...

    iframe 的使用

    在 `example.htm` 中,当用户点击页面时,会触发 `onclick` 事件,该事件调用一个 JavaScript 函数来获取 Iframe 中 `myH1` 元素的内文,并弹出提示框显示该内容。 如果需要修改 Iframe 内部的元素,可以通过以下...

    javascript 调用其他页面的js函数或变量的脚本

    6. **注意事项**: - 调用其他页面的函数和变量时,确保这些函数和变量在页面加载完成后已经定义。否则,可能会因为尝试访问未定义的元素而导致错误。 - 避免过多的页面间通信,因为它可能导致性能下降和用户体验...

    弹出层iframe

    4. `readme.html`:此文件可能是对弹出层iframe的使用说明或介绍,包含了详细的操作步骤和注意事项。 5. `index.html`:这是项目的主要入口文件,通常包含HTML结构,可能已经包含了IFRAME元素和触发弹出层的相关...

    iframe自适应高度

    #### 四、注意事项 虽然上述方法能够有效地实现`iframe`自适应高度的功能,但在实际应用中还需注意以下几点: 1. **兼容性问题**:不同的浏览器可能对`iframe`的支持程度不同,特别是在处理跨域请求时。因此,在...

    flex把html页面作为类似iframe的样子的组件完全的嵌入到mxml中去。

    4. 注意事项: - 安全限制:由于同源策略的限制,只有与IFrame源相同域的页面才能与Flex应用进行双向通信。如果需要跨域通信,需要配置服务器端的CORS策略。 - 性能考虑:加载复杂的HTML页面可能会对Flex应用的...

    对frameset、frame、iframe的js操作.pdf

    5. **注意事项**: - 当涉及到跨域操作时,由于浏览器的同源策略限制,可能无法直接访问或修改其他域下的框架内容。 - 在实际应用中,需考虑用户体验,合理设计框架结构,避免用户迷失在复杂的框架网络中。 总结...

    iframe使用post数据方式显示

    #### 五、注意事项 1. **安全性**:由于涉及到数据的传输,需要注意数据的安全性,例如使用HTTPS协议加密数据传输。 2. **用户体验**:确保页面加载速度快,避免因为网络延迟导致的用户体验下降。 3. **兼容性**:...

Global site tag (gtag.js) - Google Analytics