如何实现 iframe 子页面和父页面联调？

如何实现 iframe 子页面和父页面联调？

通过 chrome 开发者工具编辑 iframe src 的方式来达到实时预览，然后重载 iframe 来看最新效果

博文由来&方案推想

为已有系统扩展一个 iframe 子页面，该子页面风格比较独特，又需要让子页面在系统和谐融入时，用来调试可以节省大量时间，比从头搭框架要来的快得多

就比如我有一个蓝色调的后台系统，然后需要添加个地图操作子页面，而客户指定底图需要是卫星图，卫星图本身颜色就偏绿，将该子页面嵌入到系统中会感到很突兀

• 上图是我费了九牛二虎之力，耗尽了我这个前端程序员美感调了 n 遍颜色调整出来的样式，单看挺好的，项目经理也挺满意，结果把它放到系统上，啊这…好不搭！貌似得重来一遍了？那我怎么保证这回调出来的就搭了？

显然我们不能光顾着写单页面看效果，需要找到合适方案来让系统框架和单页面两者和谐共处

以下是我初步想出来的两种方式：

• 1.可以在原有系统中更换菜单链接为本地环境的链接，亦或是添加个测试菜单专门用来测试
  • 但这或多或少都会影响线上系统，很不友好…
  • 如果涉及到专人管理系统，虽说改好就可以直接刷新看到效果，但上线后还需要重新调整，就还得麻烦人家再改一次，就觉得挺尴尬…（）
• 2.自己动手丰衣足食，自己写个框架，将子页面嵌入进去来调试？
  • 写框架需要时间，写的结构框架内容太少可能会和实际效果有出入
  • 如果系统页面还涉及到响应式、自适应的效果兼容…那么自己写的框架还得支持响应式才能达到一致的表现效果
  • 写个页面框架就为了测试效果？啊我不想…

有一天突发奇想，iframe 的关键点是 src，那我们直接通过开发者工具改线上系统 DOM 里的 iframe src 地址是不是就直接达到了线上配置菜单地址的效果？

• 通过开发者工具修改线上页面 iframe src 的方式既可以不影响线上，也不必再去额外搭建框架，改完的效果可以说和最后上线后完全一致

操作步骤

在页面 iframe 区右键 => 检查 => 会弹出开发者工具并定位到点击的元素 => 在元素上方找到 iframe 元素，将其 src 从 http://122.226.81.198:9002/... 改为本地地址 http://localhost:8081/..... => 回车，会自动重新加载 iframe 页面

即可在线上网站下看到自己本地页面的效果，这样就可以愉快的边写边测了

更改后如何查看最新更改效果？

改完东西后，当然也不需要我们再刷新页面，再改 iframe 地址来查看啦

我们只需要：右键 iframe 区 => 重新加载框架，iframe 区的内容就会自动重新加载

重新加载后即可看到最新效果

注：不要使用浏览器刷新，刷新了就得再改一次 iframe 的 src，很不方便…