假设有A: 127.0.0.1:8080
B: 192.168.0.1:7001
两个服务器,A的IFrame嵌入B的页面,
由于两个页面不在同一个域和端口下,会报错:Protocols, domains, and ports must match.
怎么实现A对B页面的dom元素的操作呢?
1.实现B页面的扩展
在A服务器下建立一个代理页面,用于B页面dom对象的获取,简称 AProxy.html
这样会形成A和B不同域
A和Aproxy同域
A的Iframe 嵌入B
B的iframe嵌入Aproxy
只需要通过Aproxy对其父级B进行dom读取,虽然不属于同一域可以进行doucment.domain的设置
然后通过Aproxy对其A(parent.parent )进行dom设置,以便可以回调
代码如下:
A页面
<!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" lang="en" xml:lang="en"> <head> <title>调用demo</title> <meta name="google" value="notranslate" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> document.domain = "192.168.0.1:7001"; var swfObj = null; function setSwfObj(obj){ //这里是代理页面对B页面的dom回调 if(null == swfObj){ swfObj = obj; } return swfObj; } function TESTDrawPoints1(){ var obj = swfObj.GetExtent(); alert(obj.xmin+","+obj.ymin); //getSwfObject().DrawPoints("点图层","001","116.46,40","circle",20,"ff0000",false,"测试点",true,true,true,"","pointmouseClick",""); } </script> </head> <body> <input type="button" value="画单个点" onclick="TESTDrawPoints1()"/> <div style="overflow:auto;"> <iframe id="gframe" name="gframe" src="http://127.0.0.1:7001/B.jsp" width="99%" height="500" > </div> </body> </html>
AProxy.html
<!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" lang="en" xml:lang="en"> <head> <title>GIS调用demo</title> <meta name="google" value="notranslate" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> window.onload = function(){ document.domain = "192.168.0.1:7001"; var ssw = window.parent; var swfObj = window.parent.document.getElementById("index");//获取swfObj对象 parent.parent.setSwfObj(swfObj);//设置dom对象,A页面有回调接受 } </script> </head> <body> </body> </html>
B 页面:在其body之前加入
<iframe id="myfarme" src="###" style="display: none;"></iframe> //一定display 为none 这样不会占有空间 <script> window.onload = function(){ document.domain = "192.168.0.1:7001";//这个必须设置,设置统一域名 document.getElementById('myfarme').src="http://127.0.0.1:8080/Aproxy.html"; } </script>
相关推荐
但是,通过特定的技术手段,我们可以实现iframe跨域调用父窗口的JavaScript方法。本教程将详细讲解这一过程。 首先,我们需要了解同源策略。同源策略是浏览器为了保护用户安全而实施的一项机制,它规定只有当两个...
`iframe` 跨域访问`session`正是为了解决这一问题。 首先,让我们了解一下`session`和`cookie`的关系。`session`通常用于存储用户登录状态等临时信息,而`cookie`则作为`session` ID的载体在客户端和服务器之间传递...
2. **同源策略**:同源策略是浏览器为了安全而实施的一种策略,规定了只有同源(协议+域名+端口完全相同)的网页才能互相访问对方的DOM元素和JavaScript对象,不同源的页面则受到限制。 3. **iframe跨域问题**:当...
在Web开发中,"iframe跨域访问"是一个重要的概念,涉及到浏览器的安全策略和网页的嵌入技术。本文将深入探讨这个主题,以便更好地理解和应用。 首先,我们需要了解什么是iframe。Iframe,全称Inline Frame,是HTML...
1. **CORS(Cross-Origin Resource Sharing)**:这是一种现代浏览器支持的跨域资源共享机制,服务器端需要在响应头中添加`Access-Control-Allow-Origin`字段,允许特定或所有来源进行跨域访问。例如,服务器端代码...
需要注意的是,由于浏览器的安全策略,如果`iframe`的源(src)与包含它的页面不在同一个域名下,那么你将无法通过JavaScript访问`iframe`的`document`对象。这种现象被称为跨域限制,遵循同源策略。除非服务器设置...
iframe跨域访问也被研究的很透了。 一般分两种情况: 一、 是同主域下面,不同子域之间的跨域; 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById(“myframe...
1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制,它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面与包含它的页面不在同一个源下时,就会遇到跨域问题。为了解决这个问题,...
1、为ScriptManager添加脚本引用,不从ScriptResource.axd中加载MicrosoftAjax.js脚本,而是直接加载 <asp:ScriptReference Name="MicrosoftAjax.js" ScriptMode="auto" Path="~/ScriptLibrary/System.Web....
在JavaScript中,我们可以通过 `window.parent` 对象来访问父页面的全局变量。假设父页面有一个全局变量 `parentVar`,我们可以在子页面中这样获取: ```javascript var parentVarValue = window.parent.parentVar;...
然而,由于浏览器的同源策略限制,当`iframe`加载的页面与包含它的父页面不在同一个域时,就会遇到跨域问题。同源策略是浏览器为了保护用户隐私和安全而实施的一种机制,它限制了来自不同源的“document”之间的交互...
一种常见的方法是在父页面中监听`iframe`的`load`事件,然后通过`contentWindow`属性获取到`iframe`内部的`window`对象,并通过`document`对象获取内容区域的高度。以下是一个简单的示例: ```javascript document....
如果尝试在不同源的iframe中操作元素,将会遇到跨域访问限制,这是由浏览器的安全机制决定的。 在具体实现上,我们可以使用jQuery提供的选择器和方法来实现与父页面的交互。以下是一些关键的操作步骤: 1. 在...
然而,由于同源策略的限制,`iframe`中的网页和包含它的网页通常不能直接访问彼此的DOM(文档对象模型)或执行JavaScript函数。 要实现跨域通信,我们可以利用`window.postMessage`方法。这个API允许来自不同源的...
本文将深入探讨`iframe`与主框架如何进行同域和跨域访问,并提供相关的解决方案。 同域访问: 在同域环境下,即`iframe`的源URL与包含它的页面URL具有相同的协议、主机名和端口,`iframe`与主框架之间的通信是无...
### iframe跨域嵌套自适应高度 在网页开发过程中,`iframe`作为一种常见的网页元素,被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而,在实际应用中经常会遇到一些问题,如跨域限制、自适应高度调整以及...
`iframe`与父页面之间的通信是前端开发中的一个重要知识点,它涉及到跨域安全策略、JavaScript编程以及DOM操作等多个方面。 一、`iframe`的基本使用 在HTML中,`<iframe>`标签用于插入一个内联框架。基本语法如下:...
而在父页面中,由于`iframe`内容被封装在一个单独的窗口对象中,我们需要先获取到`iframe`的`contentWindow`或`contentDocument`属性,然后才能访问`iframe`中的内容。例如,获取`iframe`内一个名为`iframeFunction`...
在iframe子页面中,可以通过`window.parent`对象访问父窗口,进而获取或操作父页面的DOM元素。 #### 使用纯JavaScript访问父页面元素 使用纯JavaScript,可以通过`window.parent.document.getElementById`方法来...