首页 > 其他分享 >iframe父子页面通信

iframe父子页面通信

时间:2024-01-19 09:22:42浏览次数:22  
标签:fmState 父子 window iframe document Id 页面

一、同域下父子页面的通信

  1.父页面调用子iframe页面

   (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器

document.getElementById('iframe_Id').contentWindow // contentWindow 不能省略

   (2)通过iframe的name直接获取子窗口的window对象

iframe_Name.window    //window可以省略

   (3)通过window对象的frames[]数组对象直接获取子frame对象

window.frames[0] 或者 window.frames["iframe_Name"]

 2.子iframe页面调用父页面

   (1)通过parent或top对象获取父页面的window对象

        parent.window 或者 top.window //window 可以省略

 3.主页面内兄弟iframe页面之间的相互调用

   (1)同域下各个iframe窗口之间的元素和方法可以共享

 4.父页面中检测子iframe的加载情况

   (1)子iframe的onload事件

if (window.attachEvent) {//IE10及以前版本
    document.getElementById('Id').attachEvent('onload', function () {
        mini.alert('IE');
    });
} else if (window.addEventListener) {//所有主流浏览器除了IE10及以前版本
    $('#Id')[0].addEventListener('load', function () {
        mini.alert('ss');
    });
}

 

   (2)使用定时器捕获子iframe的加载状态

var iFrm = document.getElementById('Id');
var fmState = function () {
    if(document.readyState){//document.readyState用于判断文件是否加载完成,只读,firefox不支持
       var state = iFrm.contentWindow.document.readyState;
       if(state == "complete"){ return;}
       window.setTimeout(fmState, 10);
    }
}
//在改变src或者通过form target提交表单时,执行语句:
if (fmState.TimeoutI){ window.clearTimeout(fmState.timeoutI);} 
fmState.timeoutI = window.setTimeout(fmState, 400);
/*
注释:
  1.延迟400毫秒的原因?
  答:因为javascript对DOM的操作是异步的,我们必须等待脚本对DOM落实执行后才开始下一步。
  400秒这个数取决与客户端的设备和浏览器的响应速度,好的设备的响应速度能在10毫秒以内甚
  至更快,但100毫秒左右可能比较大众化,400毫秒应该是十分保守的了。
  总之,较大的毫秒数能适合更多的用户设备状况,并能减少了客户端设备的工作量。
*/

 

 5.父页面中刷新子页面

   (1)document.getElementById().src=

二、跨域下父子页面的通信

  postMessage

标签:fmState,父子,window,iframe,document,Id,页面
From: https://www.cnblogs.com/smile-fanyin/p/17973917

相关文章

  • Vue3.0 路由动画(页面跳转)
    前言vue3.0的页面组件之前切换的动画效果,在移动端H5页面,交互体验比较好,就是带Vue3的Transition组件 之前的写法是 Transition的组件要包在routerView外面,但是3.0的语法就是要在在里面了,不然会黄色警告<divclass="animation"><RouterViewv-slot="{Component,......
  • 若依页面刷新 $tabs.refreshPage()
    前言若依封装了$tab对象,其中有个刷新页签的方法。看了下refreshPage()的源码,发现是用router.replace()替换当前位置的。但是当前路由地址前加了/redirect前缀,不知这个有什么作用。查看相关源码,发现:如果不加该前缀,控制台会报错如下:定义了/redirect/:path(.*)公共......
  • Web前端新手入门系列:案例1 招商银行页面的制作
    一次比较复杂的网页设计(对初学者而言)效果图代码可能不太符合规范,但效果差不多(HTML部分<!DOCTYPEhtml><htmllang="en"xmlns="http://www.w3.org/1999/xhtml"><head><metacharset="utf-8"/><title>招商银行</title>&......
  • uni.setStorageSync在登录页面设置缓存,第一次进入首页在onload里面获取不到缓存数据的
    在onLoad里面获取不到缓存:onLoad(option){consttoken=uni.getStorageSync('token');if(!token){uni.showToast({title:"请先登录",icon:"error",......
  • 监听iframe中的鼠标点击事件
    <iframeid="iframe1"frameborder="0"name="iframe1"scrolling="no"src="https://www.baidu.com"><p>你的浏览器不支持iframes.</p></iframe>varIframeOnClick={resolution......
  • 记一个vue2中使用路由时,在同一个页面跳转,但是url参数不同,不会重新渲染页面的问题
    vue2中使用路由时,页面自己跳转自己,但是携带的参数不一样预期想要的结果是:感冒2会跟随着url的参数进行变化,但是并没用 解决方法: 在App.vue这个页面中的router-view添加  :key="$route.fullPath"结果在自己跳转自己之后会刷新页面 达成:参考:https://blog.csdn.ne......
  • uniapp开发——h5版本页面切换无法重置页面滚动状态的处理方案
    前言:使用vue开发h5的时候,都会使用vue-router的scrollBehavior函数处理页面滚动状态,代码如下:constrouter=newVueRouter({mode:"hash",routes,scrollBehavior(to,from,savePosition){if(savePosition&&to.meta.keepAlive){returnsavePosition;......
  • Python 运行时抛出了一个异常请检查疑难解答页面 stable diffusion
    Python运行时抛出异常解决方法简介在Python开发过程中,我们经常会遇到各种异常情况。当Python运行时抛出一个异常时,我们需要检查疑难解答页面来找到解决方法。本文将向你介绍如何处理这种异常情况,并提供一套具体的步骤和代码示例。解决异常的步骤下面是解决Python运行时......
  • 页面交互逻辑比较
    写这篇是为了记录下:能达到相同效果的两种不同的页面交互逻辑。场景侧边栏菜单分为两部分,一部分是固定,一部分是动态。如下图所示:不同的项目,动态菜单的数量和内容不一样。处于项目A时,若处于动态菜单页面(比如Piping),点击顶部下拉框切换到项目B),那么:之前打开的项目A的Pipin......
  • harmonyos 02 app创建,页面跳转
        HDF             添加button导入 router  返回按钮   指定返回的页面      ......