全部
问答

iframe 跨域子页面操作父页面的问题，真心求教

franky814 2014-04-25 04:08:29

现在要完成一个上传视频的功能，服务器为两台，a 为网站服务器,b为视频服务器,在b中有个上传插件，我于是在a中建立了一个页面a.html(实际上这个页面是CMS动态生成的),在a.html中嵌入了iframe，src就是b中的插件页面b.php,这样来完成上传功能，但是现在有个需求需要b.php返回一个上传路径给a.html，由于跨域，是无法直接通过parent直接将数据传递给a.html，于是又在a服务器上建立了一个页面c.html，通过b.php中嵌入了一个iframe,src指向c.html,这样上传路径通过location.hash传递给了c.html，c.html通过定时器检测hash变化，得到了从b.php传递过来的数据，但是现在问题出现了，c.html如何将这个数据传递给a.html呢，通过top,通过parent.parent都不能将数据传递过去，在chrome下控制台发现parent.parent能够得到a.html的路径，但是报错

Unsafe JavaScript attempt to access frame with URL http://localhost/lszfw/e/admin/AddNews.php?enews=AddNews&classid=62 from frame with URL http://localhost/lszfw/e/admin/ShowClassNav.php?ecms=1. The frame being accessed set 'document.domain' to 'localhost', but the frame requesting access did not. Both must set 'document.domain' to the same value to allow access.

不知道c.html如何将得到的数据传递给a.html呢？

...全文

9519 点赞收藏 25

写回复

25 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

dengqibin 2014-05-17

貌似这个就是我当年遇到的一个问题吧，http://blog.csdn.net/dengqibin/article/details/6182031 可以去看看

回复赞

657812595 2014-04-29

https://github.com/biqing/MessengerJS 去看看吧 aralejs/messenger就是根据他实现的，上面介绍的也很详细

回复赞

singlion 2014-04-28

那就用在session中放一个属性，a.html通过ajax不停刷那个属性，什么时候发生变化了就做出对应的操作。c.html就负责改动那个属性。

回复赞

不想离开水的鱼 2014-04-28

ip的木有试过，之前测试的都是域名方式

回复赞

franky814 2014-04-25

Unsafe JavaScript attempt to access frame with URL http://172.18.88.4/lszfw/e/admin/up/parent.html from frame with URL http://172.18.88.4/lszfw/e/admin/up/agent.html#path=http://172.18.88.104:81/test3/2014-04-25/61.jpg. The frame being accessed set 'document.domain' to '172.18.88.4', but the frame requesting access did not. Both must set 'document.domain' to the same value to allow access. 单独进行测试咋还是不行

回复赞

不想离开水的鱼 2014-04-25

我测试的情况是，两个完全不同的域名，并且是两台不同服务器

回复赞

franky814 2014-04-25

引用 17 楼 wzs_xyz 的回复:

[quote=引用 15 楼 franky814 的回复:] [quote=引用 14 楼 wzs_xyz 的回复:] 同源策略是不可破的，所以你只能想办法避开，大概思路是 b.php中iframe加载一个与a.html同域的页面，假设是a1.html，这样a1.html中通过paren.parent可以访问到a.html的window对象，而且注意a1.html与a.html之间是没有跨域的，所以a1.html是可以操作a.html的，那么剩下的就简单了，b.php想操作a.html时只需要设置iframe的src为a1.html，并传递url参数，a1.html获得参数并调用a.html中的函数，传递参数，这样就完成了b.php对a.html的操作并传递了参数。这就是经典的iframe跨域方式，兼容各浏览器

现在的问题就是 parent.parent访问不到a.html... [/quote] 你可以另外写个独立的demo测试，你这个看错误信息说的是c.html与a.html还是不同域，但顶级域名相同（就是仅域名的后半截相同），所以需要设置document.domain[/quote] 现在没有用域名两台机器都是 ip

回复赞

不想离开水的鱼 2014-04-25

举个例子：我这个应用是在A域名下的一个页面a.html中有个iframe，src为B域名下的b.html，因为b.html的内容高度会比a.html中初始设置的iframe高度要高一些，所以希望在b.html加载完毕后能自动调节iframe的高度。实现方法：http://www.b.com/B.html 加载完毕后，计算高度同时通过hash传给http://www.a.com/setHeight.html ,完后在http://www.a.com/setHeight.html中通过parent.parent.document.getElementById去控制http://www.a.com/a.html里的iframe的高度我是这么做的： A.html 所在域名 www.a.com

<!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>  
    <meta content="text/html; charset=gb2312" http-equiv="Content-Type">  
</head>  
    <body>  
    <iframe height='200px' id='iframe1' src="http://www.b.com/B.html"></iframe>  
</body>  
</html>

B.html 所在域名 www.b.com


    <!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>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    </head>  
    <body style="background-color:#ccc">  
        <div style="height:600px;">sdfsfsssfsfs</div>  
        <script>  
            window.onload = function()
		{
                        //先判断iframe是否存在，存在的话，删除掉先
			if(document.getElementById("sheight"))
			{
				document.body.removeChild(document.getElementById("sheight"));
			}
			var iframe = document.createElement("iframe");
			iframe.width='0px';
			iframe.height='0px';
			iframe.id='sheight';
			var currentheight = document.body.scrollHeight;
			iframe.src='http://www.a.com/setHeight.html#'+currentheight;
			document.body.appendChild(iframe);
		}  
        </script>  
    </body>  
    </html>

setHeight.html是和a.html同一个域名下的 www.a.com

<!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>  
    <meta content="text/html; charset=gb2312" http-equiv="Content-Type">  
</head>  
    <body>  
        <div></div>  
        <script type="text/javascript">  
            window.onload = function()  
            {  
                var b_iframe = parent.parent.document.getElementById("iframe1");  
                var hash_url = window.location.hash.split("#");  
                var hash_height = hash_url[1]+"px";  
                b_iframe.style.height = hash_height;  
            }  
        </script>  
    </body>  
</html>

回复赞

未知数 2014-04-25

引用 15 楼 franky814 的回复:

[quote=引用 14 楼 wzs_xyz 的回复:] 同源策略是不可破的，所以你只能想办法避开，大概思路是 b.php中iframe加载一个与a.html同域的页面，假设是a1.html，这样a1.html中通过paren.parent可以访问到a.html的window对象，而且注意a1.html与a.html之间是没有跨域的，所以a1.html是可以操作a.html的，那么剩下的就简单了，b.php想操作a.html时只需要设置iframe的src为a1.html，并传递url参数，a1.html获得参数并调用a.html中的函数，传递参数，这样就完成了b.php对a.html的操作并传递了参数。这就是经典的iframe跨域方式，兼容各浏览器

现在的问题就是 parent.parent访问不到a.html... [/quote] 你可以另外写个独立的demo测试，你这个看错误信息说的是c.html与a.html还是不同域，但顶级域名相同（就是仅域名的后半截相同），所以需要设置document.domain

回复赞

franky814 2014-04-25

引用 14 楼 wzs_xyz 的回复:

同源策略是不可破的，所以你只能想办法避开，大概思路是 b.php中iframe加载一个与a.html同域的页面，假设是a1.html，这样a1.html中通过paren.parent可以访问到a.html的window对象，而且注意a1.html与a.html之间是没有跨域的，所以a1.html是可以操作a.html的，那么剩下的就简单了，b.php想操作a.html时只需要设置iframe的src为a1.html，并传递url参数，a1.html获得参数并调用a.html中的函数，传递参数，这样就完成了b.php对a.html的操作并传递了参数。这就是经典的iframe跨域方式，兼容各浏览器

现在的问题就是 parent.parent访问不到a.html...

回复赞

未知数 2014-04-25

同源策略是不可破的，所以你只能想办法避开，大概思路是 b.php中iframe加载一个与a.html同域的页面，假设是a1.html，这样a1.html中通过paren.parent可以访问到a.html的window对象，而且注意a1.html与a.html之间是没有跨域的，所以a1.html是可以操作a.html的，那么剩下的就简单了，b.php想操作a.html时只需要设置iframe的src为a1.html，并传递url参数，a1.html获得参数并调用a.html中的函数，传递参数，这样就完成了b.php对a.html的操作并传递了参数。这就是经典的iframe跨域方式，兼容各浏览器

回复赞

franky814 2014-04-25

引用 11 楼 ivyandrich 的回复:

你可以把我那个例子拿过去你那边试一下，你看行不行，跟你这个问题是一样的。我已经实际应用过了

我看看谢谢

回复赞

franky814 2014-04-25

你可以在b.html中操作完毕后，先删除src为c.html的iframe，完后再重新创建一个iframe，src为c.html，这是什么意思这样操作

回复赞

不想离开水的鱼 2014-04-25

你可以把我那个例子拿过去你那边试一下，你看行不行，跟你这个问题是一样的。我已经实际应用过了

回复赞

franky814 2014-04-25

引用 8 楼 ivyandrich 的回复:

parent.parent.document.getElementById，应该是可以操作的，我之前有一个子页面操作父级页面iframe高度的例子，跟你这个比较类似吧，因为你c.html是跟a.html同一个域名的，所以c.html应该是可以操作a.html的内容。我的思路是：建议你不要在c.html中用定时器监测hash变化，你可以在b.html中操作完毕后，先删除src为c.html的iframe，完后再重新创建一个iframe，src为c.html，完后通过c.html中的js控制a.html中的内容，比如你可以把值放到a.html中的hidden的input标签里。我觉得这应该是能够做到的。附上我之前做的跨域调节iframe高度的例子，（前提是必须有两个域名下的文件管理权限） http://blog.csdn.net/ivyandrich/article/details/24372909

不能通过parent.parent操作a.html已经试过了

回复赞

franky814 2014-04-25

引用 7 楼 xuzuning 的回复:

跨域的话，a.html 只能主动检查不过两个服务器不都是你的吗？为什么要做成两个域呢

是的，现在是已经可以在 c.html中接受到b.php中传递的值了，c.html 和a.html现在在同一域下了，现在c.html怎么把值传递给a.html呢？

回复赞

不想离开水的鱼 2014-04-25

parent.parent.document.getElementById，应该是可以操作的，我之前有一个子页面操作父级页面iframe高度的例子，跟你这个比较类似吧，因为你c.html是跟a.html同一个域名的，所以c.html应该是可以操作a.html的内容。我的思路是：建议你不要在c.html中用定时器监测hash变化，你可以在b.html中操作完毕后，先删除src为c.html的iframe，完后再重新创建一个iframe，src为c.html，完后通过c.html中的js控制a.html中的内容，比如你可以把值放到a.html中的hidden的input标签里。我觉得这应该是能够做到的。附上我之前做的跨域调节iframe高度的例子，（前提是必须有两个域名下的文件管理权限） http://blog.csdn.net/ivyandrich/article/details/24372909

回复赞

xuzuning 2014-04-25

跨域的话，a.html 只能主动检查不过两个服务器不都是你的吗？为什么要做成两个域呢

回复赞

xfroot_gmail 2014-04-25

或者使用 jsonP

回复赞

xfroot_gmail 2014-04-25

这个是安全上的原因默认跨网站的框架是不能互相访问的,要在浏览器上设置的

回复赞

发帖

JavaScript

创建于2007-09-28

加入

8.5w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript

申请成为版主

帖子事件

创建了帖子

2014-04-25 04:08

社区公告

暂无公告