html iframe与父画面不同源

2026-09-24

html中 iframe子页面与父页面之间的方法调用 ;

<!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>Parent Page</titl

父页面 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

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

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

Iframe之间及iframe与父窗体之间值的传递

方法一:ScriptManager.RegisterClientScriptBlock(this,typeof(Page), "NoInformation", "window.parent.frames['Add'].location.reload();", true); 此: 会弹出页面刷新错误方法二: ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "NoInformat

iframe与父页面的js通信

1.父页面调用iframe中的函数: document.getElementById('myframe').contentWidow.fun1(); 2.在iframe中调用父页面中的函数: window.parent.fun2();//注意不能再文件模式下运行,要在网站发布后才可使用.

iframe与父页面传值

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

iframe与父窗口之间数据互相获取

Js/Jquery获取iframe中的元素博客分类: jquery javascript jquery 在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素. js 在父窗口中获取iframe中的元素 1. Js代码格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 实

js Iframe与父级页面通信及IE9-兼容性

一. postMessage window.postMessage()方法安全地启用Window对象之间的跨源通信:例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间. 二.语法 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow:是接收对象的窗体引用,例如:子窗体(iframe)对父级窗体的引用 "window.parent" 或者其他Iframe的引用 “Window

跨域下使用获取iframe的父页面URL

通常情况下,我们获取iframe父页面的url很简单:parent.location或top.location即可,但前提是它们遵循同源策略. 当iframe与父页面不属于同一个域名时,像上面的获取会因为安全策略原因而失败.在nczonline的一篇文章上看到一种方法,使用document.referrer. 方法很简单,通过parent !=window检测iframe与父页面是否同源,当不同源时,使用document.referrer,否则使用parent.location.href或者to

第十五课：奇葩的元素节点iframe

iframe一般用来加载一个页面,然后嵌入到主页面中.创建起来消耗资源,而且消耗连接数.但是它是一个物超所值的东西,可以实现无缝刷新,模拟onhashchange跨域,安全的加载第三方资源与广告,实现富文本编辑,文件上传,用它搞定IE6-IE7的select BUG(select标签会移到遮罩层的上面来,可以使用iframe遮住). 想要隐藏iframe那个很粗的边框,我们可以使用frameBorder属性. 比如:<iframe frameborder=0 src="" w

<iframe>框架标签的使用

同源下 1.iframe属性设置参考:https://blog.csdn.net/xiyiyindie/article/details/53415158 2.父子页面之间元素相互操作:https://www.cnblogs.com/loveamyforever/p/6222604.html 3.子页面的js,对父页面的操作:https://www.jb51.net/article/89931.htm(DOM操作) 和 https://blog.csdn.net/u012374381/art

原生js与jquery操作iframe

1 原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frames['iframeName'] 2 原生js iframe与父窗口操作 2.1 父窗口操作IFRAME:window.frames["iframeId"].document 2.2 IFRAME操作父窗口: window.parent.documen 3 jquery

记一次与iframe之间的抗争

iframe这个标签之前了解过这个东西,知道它可以引入外来的网页,但是实际开发中没有用到过.这一次有一个需求是说准备要在网页中嵌套另外一个网站,用iframe这个标签,让我测试一下这个可不可以在自己的网页中对引入进来的iframe框架进行操作,操作dom和css的一些东西.让我做出一个小案例看看可不可以,我信誓旦旦保证说可以的,我试过!!! 就这样交代给我之后信心满满的就开始了我的验证. 什么是同源? 同域名. 同端口. 同协议网上是有好多这个的解释的,给出一张图片. 看下面这张图片. 引

(二)文档请求不同源之window.name跨域

一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有window.name的属性,window.name在不同的页面(甚至不同域名)加载后依旧存在(如果没修改则值不会变化),并且可以支持非常长的name值(2MB). 二.测试步骤在某个页面控制台输入 window.name = "Hello World"; window.location

Jquery获取iframe中的元素

iframe与父页面之间相互获取元素的方法: 1.从父页面中获取iframe页面中的元素: 用法: $(window.frames["iframe_include_adverse"].document).find() 如:$(window.frames["iframe_include_adverse"].document).find("input:not(:hidden[name*='_'])"),从父页面获取iframe页面中除去隐藏域(hi

Js的iframe相关问题，如何判断当前是否在iframe中，iframe和它的父窗口如何通信

一.前言: 在web中,为了丰富我们的内容,往往需要引用其它HTML文件,这时候就需要用到 iframe 标签,本文就主要记录一下使用iframe所需要注意的问题 iframe 所使用的环境(笔者所遇到的) 1. web代码兼容 PC端和移动端,这时候就想在移动端时把页面限制在固定的宽高范围中,于是就使用 iframe 把相关页面限制在其中 2. web引用别人的 HTML 内容,就使用iframe 来实现二.遇到的问题: 1. 如何判断当前是否在iframe中 if (self.fra

iFrame跨域的方式

4种通过iframe跨域与其他页面通信的方式不同域下的iframe不能进行操作. 1.location.hash: 在url中,http://www.baidu.com#helloword的#helloworad就是location.hash,改变hash值不会导致页面刷新,所以可以利用hash值来进行数据的传递,当然数据量是有限的.假设localhost:8080下有文件cs1.html要和localhost:8081下的cs2.html传递消息,cs1.html首先创建一个隐藏的ifram

javascript之判断专题

javascript有数组,对象,函数,字符串,布尔,还有Symbol,set,map,weakset,weakmap. 判断这些东西也是有很多坑,像原生的typeof,instanceOf有一些bug,有些能满足90%的情况,也有些不太如人意. 所以各大类库都出了一些判断的函数,以is开头的xxx. 1,判断nulltypeof null//'object',所以不能用typeof判断.typeof的一个坑. null大家都是用 null===null判断的.jquery阿underscore

HTML5：使用postMessage实现Ajax跨域请求

HTML5:使用postMessage实现Ajax跨域请求由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. 这里不细说这几种方法,记录的是HTML5的window.postMessage.postMessage兼容IE8+.Firefox.Opera.Saf

tinymce插件preview改造增加全屏按钮

近期需要用到tinymce的preview插件,但preview出来的界面太小了,通过投影仪出来看的不清晰,于是想在preview的预览界面中增加全屏.放大和缩小的按钮,改造内容如下: 由于preview是在html中生成了一个iframe,要想iframe能够全屏必须在iframe的元素上加上allowfullscreen属性,iframe又是使用js构造的href与父窗口不同源不能直接通过iframe内部js修改,可以通过plugin.min.js文件中的iframe初始化函数中修改$("i

一种让 IE6/7/8 支持 media query 响应式设计的方法

在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 media query 技术实现了栅格布局 ,但要兼容 IE8 的话,( IE6/7 没有中国占比那么高,所以不用兼容)需要引入 Respond.js 的方案. 该方案的原理分以下 4 步: 1.在样式 link 之后,载入 respond.js ,该脚本会获取在他之前出现的 link 节点到一个数组 2