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呢？
...全文
10082 25 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
25 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
  • 打赏
  • 举报
 回复
这个是安全上的原因 默认跨网站的框架是不能互相访问的,要在浏览器上设置的
加载更多回复（4）
iframe与主框架跨域相互访问
然而，当`iframe`中的页面与包含它的主框架页面位于不同的域名下时，会涉及到跨域安全问题。本文将深入探讨`iframe`与主框架如何进行同域和跨域访问，并提供相关的解决方案。 同域访问： 在同域环境下，即`iframe`...
iframe父子页面的跨域问题解决；子页面向父页面传递信息的方法（iframe跨域嵌套传递消息）
iframe父子页面的跨域问题解决;子页面向父页面传递信息的方法（iframe跨域嵌套传递消息）
解决iframe跨域问题
使用iframe通过iframe子页面调用父页面或父页面调用iframe子页面时，因为违反了浏览器安全策略，无法跨iframe获取到另一页面的数据，在控制台中可以看到如下报错 Blocked a frame with origin “http://localhost:**...
iframe 跨域 (子页面如果获取父页面元素)
试验场景：  ... ... a中通过iframe 引用 b.html  期望结果：  在b.html相关处理完成后 修改 a.html中的元素  应用场景：  公司内部有两个系统，一个电商系统，一个第三方支付系统，
HTML iframe标签下 子页面调用父页面js 容易产生的跨域调用问题 Uncaught DOMException
在一些非前端项目中，经常出现HTML和JSP页面...iframe页面和父页面在同一域下：不会产生跨域调用js错误 1.1子页面获取父页面元素: $('#userId', parent.document); 1.2父页面获取子页面元素: $("#userId", docu...
JavaScript

87,997

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章