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

2014-04-25 04:08:29 1万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

【Vue】vue2集成pdfjs实现PDF文件在线预览：本地部署与跨域解决方案本文详细介绍了在Vue2项目中本地部署PDF.js实现PDF在线预览的完整方案。通过下载官方构建包并集成到项目静态目录，提供了新窗口和iframe两种核心调用方式。重点剖析了跨域问题的根源，并给出了Nginx、Node.js/Express及Spring Boot等主流后端的CORS配置解决方案，确保跨域PDF文件能够顺利加载。阅读详情

现在要完成一个上传视频的功能，服务器为两台，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呢？

...全文

移动端vue3使用pdfjs在浏览器上面运行正常，在移动端页面报错出现空白页分享一下PDFjs文件包，真心好用。一开始我的浏览器页面一直白屏，显示空白，后来换了包之后就能正常预览PDF了。如上图所示， @click-preview="previewFile"是预览PDF的方法， accept=".png...." 是可以接收的文件类型，这个打开之后手机才可以上传PDF文件，里面值类型自选。阅读详情

franky814

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

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 跨域子页面操作父页面的问题，真心求教

相关推荐