iframe跨域

最新推荐文章于 2023-11-11 14:19:29 发布

吴杼恩

最新推荐文章于 2023-11-11 14:19:29 发布

阅读量733

点赞数 1

分类专栏：一些常用的前端技术

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/49992421

版权

一些常用的前端技术专栏收录该内容

21 篇文章 1 订阅

订阅专栏

比如：A页面中iframe进一个B页面，现在需要在B页面中调用A页面的一个函数。

A页面路径：http://192.168.1.102:8080/swf/A.html

B页面路径：http://192.168.1.202:8080/dv/B.html

A页面iframe进B页面<iframe id="callif" style="display: none;" src="http://192.168.1.202:8080/dv/B.html" frameborder="0" width="100%"></iframe>

此刻A页面中有一个函数---fullScreen（full）

一：A，B页面同域：

直接调用父页面函数即可。
parent.fullScreen(isFullScreen);

二：A，B页面不同域：

那么就需要借助一个中间页面，我们定义为C页面并且把C页面放到A页面所在的域中（即A，C页面是同域，此刻，A，C页面与B页面都不同域）

1：在B页面中iframe进C页面。

2：在C页面中调用A页面函数

parent.parent.fullScreen(isFullScreen);

提示：

现在的页面关系是：A页面iframe进B页面，B页面iframe进C页面，所以A页面就是C页面的父页面的父页面。

iframe跨域例子：

1：A页面有这一个函数

function fullScreen(isFullScreen) {
w=window.document.body.offsetWidth;
h=window.document.body.offsetHeight;
w1=window.screen.availWidth;
h1=window.screen.availHeight;
	if(isFullScreen==false)
		{
		document.getElementById("dvHTML5Frame").style.position="absolute",
		document.getElementById("dvHTML5Frame").style.left="0px",
		document.getElementById("dvHTML5Frame").style.top="0px",
		document.getElementById("dvHTML5Frame").style.zIndex="1000";
	window.moveTo(0,0)
	window.resizeTo(w1-5,h1-5)
		}
 else {	
		document.getElementById("dvHTML5Frame").style.position="static";
		window.resizeTo(w,h)}
}

2：C页面有这一个函数

function  fullScreenEvent(isFullScreen){
	parent.parent.fullScreen(isFullScreen);	 
}

C页面 htm（页面加载完即刻调用fullScreenEvent函数）

<span style="font-size:12px;"><body οnlοad="<span style="font-family: Arial, Helvetica, sans-serif;">fullScreenEvent</span><span style="font-family: Arial, Helvetica, sans-serif;">()"></span></span><span style="font-size:14px;">
</body></span>

3：在B页面中有个“全屏按钮”点击此按钮页面全屏；

B页面中事先放好一个iframe元素：

<iframe id="callif" style="display: none;" src=" " frameborder="0" width="100%"></iframe>

放大按钮绑定一个事件

<span style="font-size:14px;">  var isFullScreen = false;
  function _clickEvent(e){            
                            if (window.frames.length !=0){
                                    var url="http://192.168.1.102:8080/swf/C.htm/swf/call.html?type=";
                                    $("#callif").attr({
                                        "src":url+"fullScreenEvent("+isFullScreen+")"//当B页面中这个事</span><span style="font-size:12px;">件被触发时，找到<span style="font-family: Arial, Helvetica, sans-serif;">$("#callif")元素，并给fullScreenEvent函数传参数。</span></span><span style="font-size:14px;">

                                    });
                            }else{
                                if(isFullScreen==false){
                                    if(document.documentElement.requestFullscreen) {
                                        document.documentElement.requestFullscreen();
                                    } else if(document.documentElement.mozRequestFullScreen) {
                                        document.documentElement.mozRequestFullScreen();
                                    } else if(document.documentElement.webkitRequestFullscreen) {
                                        document.documentElement.webkitRequestFullscreen();
                                    } else if(document.documentElement.msRequestFullscreen) {
                                        document.documentElement.msRequestFullscreen(); 
                                    } else {
                                        var WshShell = new ActiveXObject('WScript.Shell');
                                        WshShell.SendKeys('{F11}');
                                    }
                                } else {
                                    if(document.exitFullscreen) {
                                        document.exitFullscreen();
                                    } else if(document.mozCancelFullScreen) {
                                        document.mozCancelFullScreen();
                                    } else if(document.webkitExitFullscreen) {
                                        document.webkitExitFullscreen();
                                    } else if (document.msExitFullscreen) {
                                        document.msExitFullscreen();
                                        $("body").css({"width":w,"height":h});
                                    } else {  
                                        var WshShell = new ActiveXObject('WScript.Shell');                                  
                                        WshShell.SendKeys('{F11}');     
                                    }
                                }
                            }
                            isFullScreen = !isFullScreen;
                        }
</span>

大概思想是：

B要调用A页面的方法，A页面iframe进B页面；B页面iframe进C页面；C页面与A页面同域，所以C页面可以通过parent来调用A页面的方法；

所以B页面中的按钮被点击时候，动态iframe 进来C页面，事先在C页面中的onload加载方法中调用A页面的方法；这样就可以借助C页面间接调用A页面的方法。

吴杼恩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe跨域

比如：A页面中iframe进一个B页面，现在需要在B页面中调用A页面的一个函数。A页面路径：http://192.168.1.102:8080/swf/A.htmlB页面路径：http://192.168.1.202:8080/dv/B.htmlA页面iframe进B页面http://192.168.1.202:8080/dv/B.html" frameborder
复制链接

扫一扫