kevinpan45 2012-08-21 21:36
浏览 499
已采纳

iframe之间共享js对象

如题，现在有一个页面，里面有两个iframe，它们持有独有的javascript对象，在一些特定的功能下需要在另外一个iframe实现对自己的控制，但是用到的是自己的JS对象，这个问题怎么解决

  • 写回答

1条回答 默认 最新

  • jinnianshilongnian 2012-08-21 21:55
    关注

    1、parent
    [code="java"]



    <br> a = 1;<br> 
    <body>
    <iframe name="i1" src="i1.html"></iframe>

    <iframe name="i2" src="i2.html"></iframe>
</body>

    [/code]

    2、孩子 i1和i2
    [code="java"]



    <br> a=2;<br> 
    <body>
    iframe1

</body>

    [/code]

    [code="java"]


    iframe2
    <script type="text/javascript">
        alert(window.parent.a);
        alert(window.parent.window.frames['i1'].a);
</script>

    [/code]

    在i2中可以通过window.parent 获取到父窗口及iframe.html 中的对象；
    window.parent.window.frames['i1'] 可以获取i1 那个iframe ；

    这样即可共享变量

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • XFrameJS:在 HTML5 页面上跨 iframe（甚至不同域）共享 JS 对象
    2021-07-02 21:30
    ####A 简单的 JavaScript 框架（一个 JS 文件）有助于在 HTML5 页面上跨 iframe（支持跨域/来源）调用 API 和共享 JS 对象的属性。 xframe.js 正是你想要的，一个 JavaScript AMD 模块。 在您的 html 页面中使用它...
  • 前端vue项目和iframe项目之间的数据交互
    2022-02-28 10:43
    第7个前端的博客 方法1 通过url交互； 在vue项目中写入你所需要传输的参数 :src="'...d='+theTime" 在iframe中去解析； 方法2 通过postMessage vue父页面的代码 ...div class="zt_dtPage">...iframe ref="iframe
  • 基于 iframe 的微前端框架 —— 擎天
    2022-09-14 09:11
    vivo互联网技术的博客 基于全屏iframe的微前端框架--擎天，解决了iframe UI不同步、URL不同步、数据不共享的难题，并充分发挥了iframe作为页面容器的优势，实现了父子应用异步加载、子应用瞬间切换的能力，从而将微前端项目达到单体应用的...
  • iframe页面Storage数据共享
    2024-10-31 14:48
    forgiveForever的博客 同一个浏览器窗口下，多个iframe页面，同域下，Storage 是共享（即 sessionStorage 和 localStorage）,iframe 页面相互影响。最近开发使用了iframe做跨系统，跨页面交互,当前页面存在多个iframe页面，并且每个iframe...
  • iframe与微前端对比分析
    2025-03-04 09:59
    shaoin_2的博客 iframe 和微前端（Micro Frontends）都是前端架构中用于模块化或集成不同功能的方案，但它们的设计理念、实现方式和适用场景存在显著差异。
  • JS iFrame加载慢怎么解决
    2020-10-22 09:21
    在探讨JavaScript中iFrame加载缓慢的问题时，我们会遇到一些常见的性能瓶颈和解决方案。首先，理解iFrame加载的工作机制对于找到合适的解决方案至关重要。iFrame是HTML中的一个元素，它能够将另一个HTML文档嵌入到...
  • JS案例：前端Iframe及Worker通信解决思路
    2023-05-09 15:44
    阿宇的编程之旅的博客 此时iframe之间的通信就非常重要，为了让iframe与父级或其他页面共享数据和状态或使页面间达到联动的目的，我用JS实现了一个插件包，这里做个分享首先我们需要熟悉iframe的通信方式window对象提供了postMessage函数...
  • iframe与微前端应用[源码]
    2025-11-20 06:46
    iframe的独立浏览上下文和隔离性保证了各个子应用之间的相互隔离，避免了JavaScript和CSS样式的全局污染，同时每个子应用都可以拥有自己的运行环境，独立加载和卸载。 在Vue框架中使用iframe时，需要特别注意动态...
  • iframe 跨域之间共享localStorage,sessionStorage
    2022-09-02 17:07
    老胡说前端的博客 iframe 跨域之间共享localStorage,sessionStorage
  • iframe嵌入localstorage数据不共享解决方案
    2025-02-14 16:57
    ikun778g的博客 iframe嵌入localstorage数据不共享解决方案
  • 微前端中iframe集成方式与使用微前端框架方式对比
    2025-09-26 14:33
    二个半engineer的博客 可以把 iframe 看作微前端的一种“原始但有效”的实现方式，而微前端框架则是其“现代化、高集成度”的演进。iframe 的核心优势是“简单”和“隔离”，代价是“体验”和“集成度”。微前端框架的核心优势是“体验”...
  • iframe共享localStorage方案[项目源码]
    2025-11-24 08:48
    本文通过项目A（基于vue2）和项目B（基于vue3）的案例，具体阐述了一种通过JavaScript实现跨域iframe间localStorage共享的方法。项目A负责监听其localStorage的变化，一旦检测到变化，就触发一个消息发送机制。这个...
  • 微前端为什么不用iframe
    2025-07-21 14:41
    好先的博客 虽然iframe提供了完美的样式和JS隔离，但其过度隔离性导致关键缺陷：URL和UI状态无法同步，全局上下文隔离造成通信困难，以及性能问题。其中上下文隔离和UI同步问题尤其影响用户体验，成为放弃iframe的主要原因。...
  • 什么是iframe，火爆的微前端解决方案方案，教你快速看懂使用
    2024-08-28 09:48
    云只上的博客 iframe 创建了一个独立的浏览上下文，拥有自己的文档对象模型（DOM）和执行环境，这意味着它不会与主页面共享JavaScript变量或CSS样式，提供了较好的隔离性。基本用法 直接在模板中使用 标签： 在Vue组件的模板部分...
  • 没有解决我的问题, 去提问