【如何实现跨域获取iframe子页面动态的url】的更多相关文章

如何实现跨域获取iframe子页面动态的url

有的时候iframe的子页面会动态的切换页面,我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息.获取跨域的子页面信息会报错. 这时可以通过html5 提供的接口 postMessage来过去跨域子页面信息.如下代码: 在localhost:8000服务器下的入口测试页面:http://localhost:8000/index.html <!DOCTYPE html> <html lang="en"&g…

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…

Js获取iframe子页面全局变量

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

iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素

一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", document.iframes('iframe').document) 或代码如下:var doc = $(document.getElementById('iframeId').contentWindow.document);var ele = $("#objId",doc);…

获取iframe子页面节点，响应浏览器宽高

获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" id="org" src="" frameborder="0"></iframe> </div> 实现方法 <script> //新增页面加载时,响应浏览器宽高 window.onload = functi…

获取iframe子页面内容高度给iframe动态设置高度

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>客户详情</title> <script src=&quo…

Js动态获取iframe子页面的高度总结

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

Selenium_webdriver获取iframe子页面元素

有时候我们在定位一个页面元素的时候发现一直定位不了,反复检查自己写的定位器没有任何问题,代码也没有任何问题.这时你就要看一下这个页面元素是否在一个iframe中,这可能就是找不到的原因之一.如果你在一个default content中查找一个在iframe中的元素,那肯定是找不到的.反之你在一个iframe中查找另一个iframe元素或default content中的元素,那必然也定位不到. selenium webdriver中提供了进入一个iframe的方法: WebDriver org.…

iframe子页面获取父页面元素的方法

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

父子页面之间元素相互操作(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…

jquery读取iframe子页面和父页面的处理

1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames('iframename').document) 3.js 在iframe子页面获取父页面元素代码如下: indow.parent.document.getElementByIdx_x("元素id");…

利用location.hash+iframe跨域获取数据详解

前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段js代码,同样都是利用和子窗口之间的通信完成数据传输,同样要针对同源策略做出处理. location.hash和锚点 要理解location.hash+iframe跨域获取数据的机制,先得知道什么是location.hash,楼主买一送一,把锚点也一起介绍了. 其实锚点很简单,也相信大家都有用过.纳尼…

利用window.name+iframe跨域获取数据详解

详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包…

iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包…

页面跨域与iframe通信(Blocked a frame with origin)

项目中有个需求是在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中:但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题: 只保留单个滚动条,那么就要让iframe的高度自适应,而从主页面显然直接取不到iframe的值,因为这是跨域的(前台页面与后台页面不在同一个IP地址或者同一个端口),尝试访问会报错: Blocked a frame with origin "http://7.35.0.8:8080" from accessing a frame wit…

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…

JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的…

允许CEF跨域访问iframe

默认情况下,如果嵌入本地Web页面,并在页面内部使用iframe来显示一个在线页面,加载的过程中会触发一个未捕获异常,虚函数CefV8ContextHandler::OnUncaughtException被调用,如果搞个控制台窗口来输出异常消息,或者将消息打印到日志中,会是这样: Unsafe JavaScript attempt to access frame with URL file:///F:/Workspace/Project/WebUI_V1.0.0/WebUI/main.html…

【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不…

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…

js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源.这种安全限制称为同源策略. ( 现代浏览器在安全性和可用性之间选择了一个平衡点.在遵循同源策略的基础上,选择性地为同源策略"开放了后门". 例如img script style等标签,都允许垮域引用资源.) 下表给出了相对 …

CRM 2016 IFrame 子页面执行 父页面函数

CRM 中定义以下函数: windows.parent.functionname(){ //do somethion } IFrame 子页面调用 JS: windows.parent.functionname(); 简单 alert(); 可以执行,复杂函数提供跨域之类错误. 其它方法见此前另一文章:https://www.cnblogs.com/BinBinGo/p/9887278.html…

再也不学AJAX了！（三）跨域获取资源 ③ - WebSocket & postMessage

让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术.而基于浏览器的"同源策略",不同"域"之间不可以发送AJAX请求.但是在某些情境下,我们需要"跨域获取资源",为了满足这一需求,我们可以使用"JSONP"与"CORS"两种技术. 现在,我们将要简要了解"跨域共享资源"的另外两种方式:WebSocket 和 postMessage.让我们先大概看看他们…

vue 给嵌套的iframe子页面传数据 postMessage

Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe> 父页面发送数据参数: <script> e…

跨域获取json一些理解[腾讯电商数据的拉取方式]

如何跨域获取json数据源?我们都知道要有callback,具体callback是如何工作的呢?如果服务器端不接收callback,我们是不是就没有办法处理了呢?读完本文后相信你会有一个大体的了解. 我们先来看一个例子:http://www.darlingbank.com/cutpage/index.php/promote/edit/getfun/json/ 如果查看源码,你会发现,根本看不到页面里面的图片和文字.这是你会想应该是ajax异步获取的数据,但是打开FF,查看 你会发现也没有请求,这…

XMLHTTPRequest对象不能跨域获取数据？！

写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一个json文件过来),运行就跑不起来了. 这就涉及到跨域获取数据的问题了. 我运行时的环境是这样的: 本地服务器运行当前代码.转向http://gumball.wickedlysmart.com获取一个json文件过来. 结果:报错. XMLHttpRequest cannot load   No…

[ 转 ]jquery的ajax和getJson跨域获取json数据

目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端生成script tags至返回至客户端,也就是动态生成javascript标签,通过javascript callback的形式实现数据读取. html代码: //首先要引入jquery的js包 jQuery(document).ready(function(){ $.ajax({ type :…

jsonp跨域获取数据小解

jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访问非同源的js脚本,所以通过src属性访问服务器会返回函数的js代码,而我们想要的数据就作为函数参数返回,而我们会先定义这个函数,返回的js代码就可执行 (2) jsonp实现代码 请求页面 <!DOCTYPE html> <html> <head> <title&g…

iframe子页面position的fixed

前言: 首先说一说我昨天天的苦逼经历.中午吃饭时一同事跟我说,他做的项目嵌套iframe后,子页面的position设置fixed失效了. 经过反复询问,得知他用了两层iframe,再加上最外的父页面,一共就是三层. 下午就其iframe子页面固定定位问题进行处理,上网找了各种解决方案:插件.js模拟等效果均不理想.页面不是代码过多就是效果卡顿.跳动(附:博主的同事架构的页面是用于手机微信端,部分PC端的优秀代码并不适用,非代码不行).无奈之下只得另想出路,最终功能完美实现,现拿出来与大家共享.…