首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

实现iframe父窗体与子窗体的通信

本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。同时本文会提供一个可运行的实例代码,实现在父窗体中,获取到来自子窗体的数据的效果。...1.采用方案 1.1 MessengerJS方案 可以采用MessengerJS方案,该方案可以实现父窗体与iframe之间的通信、多个iframe之间的通信。...(注意: 项目名称应使用字符串类型) 父窗体与子窗体初始化Messenger对象: // 父窗口中 - 初始化Messenger对象 // 推荐指定项目名称, 避免Mashup类应用中, 多个开发商之间的冲突...对象的名字: // 父窗口中 - 添加消息对象, 明确告诉父窗口iframe的window引用与名字 messenger.addTarget(iframe1.contentWindow, 'iframe1.../messenger.js"> div>这是父窗体div> div id="msg">div> iframe id

9.8K771
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    动态中的守候:滑动窗口与距离的诗篇

    两个指针朝着一个方向移动 同向双指针被称为滑动窗口 滑动窗口的使用方法: 1.先定义两个指针 我们的left先不要动,持续进窗口right,直到我们的Sum的大小大于我们的target的值 这个...2 直到我们的指针没有下一个元素指向了,那么我们的滑动窗口就结束了 我们的这个滑动窗口利用了单调性规避了很多没有必要的枚举行为 时间复杂度: 使用right进窗口的时候我们是需要一个循环的 1.3...我们从两个方面来解释:扩展窗口和收缩窗口。 哈希表的作用 hash[128] 是一个大小为 128 的数组,用来记录窗口中每个字符的出现次数。...进入内层 while,通过移动 left,把窗口左边的 "b" 移除,直到窗口中没有重复字符。 这样不断调整窗口的大小,确保窗口中没有重复字符,并计算最长子串的长度。...总结哈希表的工作机制 hash 数组的作用是在滑动窗口内实时记录每个字符的出现次数。每当字符加入窗口时,哈希表相应位置的值会递增,当字符被移出窗口时,哈希表相应位置的值会递减。

    5510

    Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    --通过js获取 tab对应的页面内容--> div> div> div> div> JS代码片段 /** * 增加tab标签页 * @param...tab“装载”的url * tabContentID tab标签页的页面内容所在的父级元素(div容器) * * @returns {boolean} */ function addTab(options...= 'iframe' + options.menuID; } } /*** * 判断tab页是否已经打开 * @paramtabName当前tab的名称 * @returns {boolean...().top; //容器距离document顶部的距离 } $.each(iframes, function(index, iframe){ var h = window.innerHeight||...这里offsetTop可以替换成一个比较合理的常量值 }); } /** * 浏览器窗口大小发生变化时,自动调整iframe页面高度 * 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize

    7.8K20

    bootstrap3-dialog打开嵌套iframe窗口

    >iframe src="'+pagepath+'" style="width:100%;height:'+height+';border-width:0 ">iframe>div>'));...//打开窗口页面增加接受消息监听,在关闭事件后传递消息通知父级页面关闭dialog window.addEventListener('message', receiveMessage,...,收到指定的消息,则关闭dialog,能这样做的原因是dialog模态窗口实质上就是在原页面基础上加上了一个div和遮罩层,其实还是属于同一个页面的,所以相互发送message可以收到,所以关闭dialog...window.parent.postMessage('close', '*'); }     关于dialog的使用还有一个问题,如果在一个iframe中打开窗口,遮罩层和dialog都会以iframe...为基准,但有时候这样会显的窗口太小使用不方便,所以我们这里要再加一种方法,打开全局dialog,就是如果在iframe中打开,dialog要显示在iframe的顶级父级窗口中,这就需要我们对源码小小的改造下

    45420

    基于iframe的跨域与更新父窗体地址栏的解决方案

    在访问到内部某个页面后,希望父窗体的地址栏跟随子窗体内部src,同时更新父窗体的地址栏,再刷新页面可以保持在当前访问的页面,同时可以分享链接。...运维平台提供的是去掉顶部导航的页面的地址,即只包含内容,这样可以直接使用管理平台的顶部导航,在内容区域嵌套运维平台的页面,让用户在使用时,感受不到两个平台间的跳转。...但有一个前提,src和你的父窗口的地址必须是同源的,也就是不能跨域。 但实际上管理平台的页面和运维平台的页面并不是同源的,所以首先要解决的是跨域问题。...这样每次iframe内部的src发生变化后,都会相应修改父窗体的地址栏,但又不会去刷新当前页面,效果上看起来就像是在自己的页面中操作,感受不到跨站点的问题。...每次刷新页面,在页面初始化时,就根据当前父窗体的地址栏中的url去得到属于运维平台的location.search值,用这个值修改iframe的src值,达到每次刷新页面,都可以根据当前地址栏的url,

    14.6K1350

    前端之HTML和CSS

    ,常用的属性有: 1、none 元素隐藏且不占位置 2、block 元素以块元素显示 css元素溢出 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow...*/ opacity:0.3; /* 兼容IE */ filter:alpha(opacity=30); 页面嵌套 在一个页面中可以开一个局部的窗口,嵌入另外一个页面,可以使用iframe标签来实现这个功能...iframe src="001.html" frameborder="0">iframe> 其中“src”设置的是另一个网页的地址,“frameborder”设置的是这个局部窗口的边框的粗细。..." 新开一个浏览器窗口显示链接的页面 target="framename" 将链接的页面显示在名称是“framename”的iframe窗口中 iframe> 上面的iframe窗口,缺省显示001.html页面,点击链接,就可以切换iframe

    4.3K30

    JS常用代码块

    (newBox) } //调用方法: 测试按钮 div id="box">测试内容div> 3. js 获取文档高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标...'; 遍历父页面所有iframe并输出ID(firefox可以) function iframeID(){ var fs = window.parent.window.frames; for(var

    3.2K31

    CSS 定位详解

    div { position: relative; top: 20px; } 上面代码中,div元素从默认位置向下偏移20px(即距离顶部20px)。...; } #son { position: absolute; top: 20px; } 上面代码中,父元素是relative定位,子元素是absolute定位,所以子元素的定位基点是父元素,相对于父元素的顶部向下偏移...如果父元素是static定位,上例的子元素就是距离网页的顶部向下偏移20px。 注意,absolute定位的元素会被"正常页面流"忽略,即在"正常页面流"中,该元素所占空间为零,周边元素不受影响。...3.3 fixed 属性值 fixed表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。 ?...,一旦视口的顶部与#toolbar的距离小于20px(门槛值),#toolbar就自动变为fixed定位,保持与视口顶部20px的距离。

    1.8K40

    layui弹窗间的传值(layui弹出层传值)(窗口传值)

    主要有两部分 1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 3、通过session互传 4、通过调用父窗口的函数从而获取到父窗口的值(相反也是可以的) 1、从主窗口传值到弹出层 首先时js...这是将在父窗口中获取子窗口form标签里的所有值,并根据name名和值形成键值对json对象 //console.log(layero); layer.alert...'); 删除全部 sessionStorage.clear(); 4、通过调用父窗口的函数从而获取到父窗口的值, 这个适合获取少量值, 父窗口的js: (1)(这个是获取bootstraptable...= window.parent.getrowselect(); console.log(rowselect);//这里可以打印一下获取到值没有 5、假如是子窗口传值给父窗口 父窗口js: function...//得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method(); 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/131259.html

    7.4K20

    CSS 定位详解

    div { position: relative; top: 20px; } 1 2 3 4 复制 上面代码中,div元素从默认位置向下偏移20px(即距离顶部20px)。...定位,子元素是absolute定位,所以子元素的定位基点是父元素,相对于父元素的顶部向下偏移20px。...如果父元素是static定位,上例的子元素就是距离网页的顶部向下偏移20px。 注意,absolute定位的元素会被"正常页面流"忽略,即在"正常页面流"中,该元素所占空间为零,周边元素不受影响。...# 3.3 fixed 属性值 fixed表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。...,一旦视口的顶部与#toolbar的距离小于20px(门槛值),#toolbar就自动变为fixed定位, 保持与视口顶部20px的距离。

    1.7K10

    onbeforeunload事件被a链接触发的问题

    …) 言归正传,我遇到的问题是,自己的游戏上了新浪微游戏,在新浪微游戏的顶部有它们的导航,但是点击里面一些按钮时就会触发游戏里面的window.onbeforeunload事件… 搜索了一下,找到这篇文章...:BX2047: 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异 根据 MSDN 中描述,IE 的 onbeforeunload 事件可由以下这些条件触发: 关闭当前浏览器窗口...事件,在点击链接test2、test3时会触发iframe内的window.onbeforeunload事件,test1、test4则不会,尽管页面与iframe并非同一域。...我知道会有很多办法避免这种情况发生,比如改父层的实现==,但是这个页面是新浪微游戏的,我根本不可能有权力去要求什么… 所以想到一个办法是,在window.onbeforeunload函数里,判断当前鼠标的位置...… 本文参考: 1、BX2047: 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异 2、onbeforeunload与a标签在IE中的冲突bug 3、Can I prevent

    1.9K20

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查

    '); } }); }); 里面用到了easyui 的window 所以我们在Index顶部加入一个层来包含弹出window,我们把增加,修改的视图放在...iframe里面,然后附加到window里面弹出 div id="modalwindow" class="easyui-window" data-options="modal:true,closed:...关于$.messageBox5s是我扩展easyui的message控件的结果,扩展如下 /** * 在iframe中调用,在父窗口中出提示框(herf方式不用调父窗口) */ $.extend({...嵌入网页时的内存泄漏问题 */ $.fn.panel.defaults.onBeforeDestroy = function () { var frame = $('iframe', this...jquery.unobtrusive-ajax.min.js")" type="text/javascript"> @RenderBody() 我们以后的弹出窗口全部要用到这个模版

    1.9K70

    前端成神之路-定位

    bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线的距离。 left left: 80px 左侧偏移量,定义元素相对于其父元素左边线的距离。...—— 浏览器可视窗口 + 边偏移属性 来设置元素的位置; 跟父元素没有任何关系;单独使用的 不随滚动条滚动。...哈根达斯分析 一个大的 div 中包含 3 张图片; 大的 div 水平居中; 2 张小图片重叠在广告图片上方 —— 脱标,不占位置,需要使用绝对定位; 2 张小图片分别显示在左上角和右下角 —— 需要使用边偏移确定准确位置...案例小结: 子绝父相 —— 子元素使用绝对定位,父元素使用相对定位; 与浮动的对比: 绝对定位:脱标,利用边偏移指定准确位置; 浮动:脱标,不能指定准确位置,让多个块级元素在一行显示。...新浪案例分析 顶部图片固定在浏览器可视窗口顶部,不会随窗口一起滚动; 左右两侧的广告图片固定在浏览器可视窗口的左右两侧,不会随窗口一起滚动; 注意:底部的内容图片初始显示在顶部图片的下方,如何解决?

    1.9K20

    C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

    > 答案:parentNode 观察元素结构可知,div元素为span元素的父级的父级,使用parentNode即可返回指定节点的父节点,父级的父级即为 .parentNode.parentNode...(2)实现窗口滚动时,类名为top的元素固定在顶部,请补全横线处代码。...xpos:距离网页左上角x坐标 ypos:距离网页左上角y坐标 scrollBy() 可将内容滑动指定的距离(相对于当前位置) innerWidth 返回窗口的网页显示区域宽度 innerHeight...() 可将内容滑动指定的距离(相对于当前位置) innerWidth 返回窗口的网页显示区域宽度 innerHeight 返回窗口的网页显示区域高度 2. location 对象: 名称...scrollTo方法,scrollTo的两个参数为窗口横坐标和纵坐标位置,此处应为顶部对应的纵坐标大小。

    2K20
    领券