全面兼容的Iframe 与父页面交互操作

父页面 Father.htm 源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title&g…

bug：页面交互操作引发的问题

最近在测试一些h5页面,突然悟到一些测试点需求点: 用户可以在页面领取礼物,领取的礼物在页面底部展示,用户点击礼物可调起分享弹窗,礼物超过一屏可左右滑动, bug的表现形式: 仅当礼物超过一屏时(一行),点击礼物无法调起分享弹窗(此问题仅在Android机上可复现,ios无法复现) 问题原因: 1.前端开发在开发使用了最新版本滑动控件,这个最新的控件需要对属性进行配置,比如点击事件等研发使用了新控件,没有对属性值进行配置 2.问题为什么只在Android上可复现? Android原生系统对较…

iframe与父页面中JS执行顺序控制

同事遇到了一个问题: 父页面中有几个iframe,初衷是父页面的JS通过AJAX获取数据,然后用于初始化iframe页面,可以结果却是有的iframe页面却不能获得数据. [问题根源] 父页面在加载iframe的时候,也会执行JS代码,二者执行完成先后顺序并不可控,而iframe却要使用JS获取的数据,导致在iframe初始化时,没有得到数据,也就无法初始化iframe页面了. [解决办法] HTML代码中,iframe的src属性不赋值.父页面的JS在AJAX请求成功之后,再为iframe的s…

iframe与父页面传值

最近做的项目中用到了不少iframe,而且需要实现: 从父页面获取iframe中某个元素的值或则从iframe页面获取其父页面上某个元素的值. 在网上查询了相关东西,后总结如下: (1)父页面获取iframe中的元素值: //根据iframe的id获取对象 var i1 = window.frames['iframeId']; //var iframe =window.frames[0];也可以 //获取iframe中的元素值 var val=i1.document.getElementById…

js对iframe内外（父子）页面进行操作

dom对象推荐阅读怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容主要的两个API就是contentWindow,和contentDocument iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取iframe的document对象这两个API只是DOM节点提供的方式(即getELement系列对象) var i…

父页面操作iframe子页面的安全漏洞及跨域限制问题

一.父子交互的跨域限制同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域情况下,就会有限制,无法相互操作. [解决办法] 1.主域不同没招 2.主域相同,子域不同以父(a.baidu.com)子(b.baidu.com)为例: 这俩页面相互操作,要是想解决跨域限制,必须设置一个共同的主域,即document.domain="baidu.com" 二.禁止父…

js之iframe子页面与父页面通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.w…

IFrame父页面和子页面的交互

现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面提供了四中方法来操作iframe里面的dom: a. contentWindow: 以window对象返回iframe中的文档,所有主流浏览器都支持. 用法: // 获取id为iframeId的子页面中的div01元素 document.getElementById('iframeId').cont…

嵌入式iframe子页面与父页面js通信方式

iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信. 一.同域下父子页面的通信父页面 Parent.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="…

JS中iframe子页面与父页面之间通信

JQuery操作iframe父页面与子页面的元素与方法

JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在iframe中调用父页面中定义的方法和变量: parent.method pa…

iframe子页面与父页面元素的访问以及js变量的访问

1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法 var tet = document.getElementById('iframeId').con…

父子页面之间元素相互操作(iframe子页面)

js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() { var oIframe = window.frames["oIframe"].document.getElementById("getFrame"); console.log(oIframe); } 注意:此处一定要加上window.onload或者DOMConte…

关于iframe调用父页面元素操作

在iframe子页面获取父页面元素代码如下: //在iframe子页面获取父页面元素 $.('#objld', parent.document); //在父页面获取iframe子页面的元素 $("#objid", document.iframes('iframe').document) //或 $(document.getElementById('iframeId').contentWindow.document.body).html() $(document.getElementB…

iframe父页面与子页面的交互

iframe子页面调用父页面的变量.js方法.元素(非跨域): window.parent.varName; //获取父页面js全局变量 window.parent.fnName; //获取父页面js全局方法 window.parent.document.getElementById(id); //获取父页面元素父页面调用iframe页面中的变量.js方法.元素(非跨域): window.frames[frameName][0] = document.getElementById(frameI…

Js动态获取iframe子页面的高度////////////////////////zzzz

Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结问题的缘由产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度给元素设置高度这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置高度涉及了一些兼容问题: IE用attachEvent | 3C用onload来判断子页面是否加载完成. IE用contentWindow | 3C用contentDocument来获取子页面 IE用documen…

js 在iframe子页面获取父页面元素,或在父页面获取iframe子页面的元素的几种方式

用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm…

Hybrid APP之Native和H5页面交互原理

Hybrid APP之Native和H5页面交互原理 Hybrid APP的关键是原生页面与H5页面直接的交互,如下图,痛过JSBridge,H5页面可以调用Native的api,Native也可调用H5页面的方法或者通知H5页面回调在Hybrid APP中,原生与H5的交互方式在Android和iOS上的实现是有异同的,原因是Android.iOS的通信机制有所区别,下面介绍原生和H5相互调用的方法 Native与H5交互的两种方式原生和前端的交互有两种方式:url scheme以及Jav…

html中子界面与父界面相互操作或传值

一.在使用iframe的页面,要操作这个iframe里面的DOM元素可以用: contentWindow.contentDocument(测试的时候chrom浏览器,要在服务器环境下) contentWindow:非W3C标准,虽然不是标准的一部分,但各个主流浏览器都支持: 返回 frame/iframe 生成的 window 对象.可直接操作子界面中的方法与变量子界面: //子界面 <!DOCTYPE html> <html lang="en"> <…

Js获取iframe子页面全局变量

项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window.frames['iPage'].变量名火狐下:window.frames['iPage'].contentWindow.变量名 IE&火狐下:document.getElementById('iPage').contentWindow.变量名具体原因没有深究,今天在调试一个iframe例子的…

Silverlight与JavaScript的交互操作

Silverlight和JavaScript交互介绍以及简单Demo演示,主要包括JavaScript操作Silverlight数据.Silverlight操作JavaScript数据以及数据模版绑定数据. 1.Silverlight和JavaScript概念可能有的朋友对于这两技术都很熟悉,有的可能不是很熟悉,为了下面好理解简单介绍一下. (1).JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有相对安全性的客户端脚本语言.同…

记Outlook插件与Web页面交互的各种坑 (含c# HttpWebRequest 连接https 的完美解决方法)

1) 方案一, 使用Web Service 基础功能没问题, 只是在连接https (ssh) 网站时, 需要针对https进行开发 (即http 和https 生成两套接口, 不太容易统一 ). 后来改为使用web页面交互(实质是.ashx) 结果也遇到了不少问题. 2) 方案二, 使用 HttpWebRequest . HttpWebRequest 这东西get数据很容易, POST却很麻烦, 最终代码如下: public class WebApiClient { pu…

Saiku使用iframe嵌入页面访问地址配置化（二十八）--DWR的基本使用

Saiku使用iframe嵌入页面使用时ip与端口配置化(二十八)--DWR的基本使用 DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA方法,就像它就在浏览器里一样. 这里做的一个需求是将saiku的访问url配置化,放到配置文件里,然后在jsp页面里就不直接写saiku的url了. 1.在配置文件 config.pro…

layui框架中layer父子页面交互的方法分析

本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 还可点击此处本站下载. 当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数. 1.访问父页面元素值 ? 1 var parentId=parent.$("#id").val();//访问父页面元素值 2.访问父页面方…

jquery实现页面交互的几个小例子

翻看了以前留下的笔记,发现自己竟然做过这么多的页面交互效果,没有使用原生js,全是通过jquery实现的,于是把他们整理下来,附上表现效果图及源代码 1 业务应用:授权商品组和删除商品组本质:复选框及文字的左右移动表现效果:点击确定时谈框提示哪些商品组已新授权或新删除,只是记录的并非商品组文字,而是商品组编码,各商品组之间以~号分隔 <html > <head> <meta http-equiv="Content-Type" content="…

Headroom.js – 快速响应用户的页面滚动操作

Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom.js 简单易用,它有一个纯 JS API,以及可选的 jQuery.Zepto 和 AngularJS 兼容的插件. 您可能感兴趣的相关文章推荐35款精致的 CSS3 和 HTML5 网页模板精选12款优秀 jQuery Ajax 分页插件和教程 10大流行的 Metro UI 风格 Boots…

Jquery如何获得<iframe>嵌套页面中的元素

DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjquery方法:在父窗口中操作选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text");在IFRAME中操作选中父窗口中的所有输入框:$(window.parent.document).…

（基础篇）PHP与Web页面交互

PHP与Web页面交互是实现PHP网站与用户交互的重要手段.在PHP中提供了两种与Web页面交互的方法,一种是通过Web表单提交数据,另一种是通过URL参数传递. 这里我们将详细讲解表单的相关知识,为以后学习PHP页面交互做好铺垫. 1 .创建表单 Web表单的功能是让浏览者和网站有一个互动的平台.Web表单主要用来在网页中发送数据到服务器,如提交注册信息时需要使用表单.当用户填写完信息后执行提交(submit)操作,于是将表单中的数据从客户端的浏览器传送到服务器端,经过服务器端PHP程序进行处…

JQuery调用iframe父页面元素与方法

JQuery操作iframe父页面与子页面的元素与方法下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在iframe中调用父页面中定义的方法和变量: parent.method parent.value 第四.…

C# winForm启动最小化到任务栏右侧通知栏并交互操作

原文链接:http://blog.sina.com.cn/s/blog_45eaa01a01013u36.html C# winForm启动最小化到任务栏右侧通知栏并交互操作一.主要功能:(1).程序启动自动隐藏到任务栏右侧通知栏显示.(与系统托盘同义)(2).双击系统托盘图标显示.隐藏窗口:(3).右击系统托盘图标提供三个菜单选项,“退出”.“隐藏”.“显示”: 二.相关控件:1.建一个WinForm程序—IconForm,将Form属性ShowInTaskbar改为false,这样程序将不…

【全面兼容的Iframe 与父页面交互操作】的更多相关文章