`

JS Iframe跨域访问父document对象

    博客分类:
  • JS
 
阅读更多

假设有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跨域调用父窗口js.zip

    但是,通过特定的技术手段,我们可以实现iframe跨域调用父窗口的JavaScript方法。本教程将详细讲解这一过程。 首先,我们需要了解同源策略。同源策略是浏览器为了保护用户安全而实施的一项机制,它规定只有当两个...

    iframe 跨域访问session

    `iframe` 跨域访问`session`正是为了解决这一问题。 首先,让我们了解一下`session`和`cookie`的关系。`session`通常用于存储用户登录状态等临时信息,而`cookie`则作为`session` ID的载体在客户端和服务器之间传递...

    完美解决iframe跨域问题

    2. **同源策略**:同源策略是浏览器为了安全而实施的一种策略,规定了只有同源(协议+域名+端口完全相同)的网页才能互相访问对方的DOM元素和JavaScript对象,不同源的页面则受到限制。 3. **iframe跨域问题**:当...

    iframe跨域访问示例

    在Web开发中,"iframe跨域访问"是一个重要的概念,涉及到浏览器的安全策略和网页的嵌入技术。本文将深入探讨这个主题,以便更好地理解和应用。 首先,我们需要了解什么是iframe。Iframe,全称Inline Frame,是HTML...

    iframe跨域常用问题和iframe页面自适应

    1. **CORS(Cross-Origin Resource Sharing)**:这是一种现代浏览器支持的跨域资源共享机制,服务器端需要在响应头中添加`Access-Control-Allow-Origin`字段,允许特定或所有来源进行跨域访问。例如,服务器端代码...

    jQuery获取iframe的document对象的方法

    需要注意的是,由于浏览器的安全策略,如果`iframe`的源(src)与包含它的页面不在同一个域名下,那么你将无法通过JavaScript访问`iframe`的`document`对象。这种现象被称为跨域限制,遵循同源策略。除非服务器设置...

    js iframe跨域访问(同主域/非同主域)分别深入介绍

    iframe跨域访问也被研究的很透了。 一般分两种情况: 一、 是同主域下面,不同子域之间的跨域; 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById(“myframe...

    iframe 跨域 自动适应高度

    1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制,它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面与包含它的页面不在同一个源下时,就会遇到跨域问题。为了解决这个问题,...

    解决ASP.NET AJAX在frame及iframe中跨域访问的问题

    1、为ScriptManager添加脚本引用,不从ScriptResource.axd中加载MicrosoftAjax.js脚本,而是直接加载 &lt;asp:ScriptReference Name="MicrosoftAjax.js" ScriptMode="auto" Path="~/ScriptLibrary/System.Web....

    Iframe获取父页面的变量和控件

    在JavaScript中,我们可以通过 `window.parent` 对象来访问父页面的全局变量。假设父页面有一个全局变量 `parentVar`,我们可以在子页面中这样获取: ```javascript var parentVarValue = window.parent.parentVar;...

    iframe 跨域

    然而,由于浏览器的同源策略限制,当`iframe`加载的页面与包含它的父页面不在同一个域时,就会遇到跨域问题。同源策略是浏览器为了保护用户隐私和安全而实施的一种机制,它限制了来自不同源的“document”之间的交互...

    iframe跨域自适应高度模板

    一种常见的方法是在父页面中监听`iframe`的`load`事件,然后通过`contentWindow`属性获取到`iframe`内部的`window`对象,并通过`document`对象获取内容区域的高度。以下是一个简单的示例: ```javascript document....

    Jquery调用iframe父页面中的元素及方法

    如果尝试在不同源的iframe中操作元素,将会遇到跨域访问限制,这是由浏览器的安全机制决定的。 在具体实现上,我们可以使用jQuery提供的选择器和方法来实现与父页面的交互。以下是一些关键的操作步骤: 1. 在...

    iframe跨域互相调用资源

    然而,由于同源策略的限制,`iframe`中的网页和包含它的网页通常不能直接访问彼此的DOM(文档对象模型)或执行JavaScript函数。 要实现跨域通信,我们可以利用`window.postMessage`方法。这个API允许来自不同源的...

    iframe与主框架跨域相互访问

    本文将深入探讨`iframe`与主框架如何进行同域和跨域访问,并提供相关的解决方案。 同域访问: 在同域环境下,即`iframe`的源URL与包含它的页面URL具有相同的协议、主机名和端口,`iframe`与主框架之间的通信是无...

    iframe跨域嵌套自适应高度

    ### iframe跨域嵌套自适应高度 在网页开发过程中,`iframe`作为一种常见的网页元素,被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而,在实际应用中经常会遇到一些问题,如跨域限制、自适应高度调整以及...

    iframe与父页面传值

    `iframe`与父页面之间的通信是前端开发中的一个重要知识点,它涉及到跨域安全策略、JavaScript编程以及DOM操作等多个方面。 一、`iframe`的基本使用 在HTML中,`&lt;iframe&gt;`标签用于插入一个内联框架。基本语法如下:...

    iframe与父页面传值(方法互调)

    而在父页面中,由于`iframe`内容被封装在一个单独的窗口对象中,我们需要先获取到`iframe`的`contentWindow`或`contentDocument`属性,然后才能访问`iframe`中的内容。例如,获取`iframe`内一个名为`iframeFunction`...

    父页面得到iframe的数据和iframe页面得到父页面的数据.txt

    在iframe子页面中,可以通过`window.parent`对象访问父窗口,进而获取或操作父页面的DOM元素。 #### 使用纯JavaScript访问父页面元素 使用纯JavaScript,可以通过`window.parent.document.getElementById`方法来...

Global site tag (gtag.js) - Google Analytics