iframe跨域请求

需求:

在一个页面中通过iframe标签签入一个页面,通过操作iframe标签内的页面来切换iframe的页面.

即通过iframe内子页面来调用父页面的方法实现功能,当两个页面域名不同,要跨域操作.

解决方案:

跨域的调用，调用属性/函数的页面与被调用属性/函数的页面处于同一个域,这里使用一个中间页面.因为是子页面调用父页面,所以中间页面的域名同父页面.

代码:

父页面:

http://localhost:8080/TomcatTest/Page.html

<iframe src="http://10.110.80.186/jcms/publish/zglh/zxggpc/"   οnlοad="changeFrameHeight()" id="myframe" name="myframe" width="100%"  frameborder="0" scrolling="no"></iframe>

子页面:

http://10.110.80.186/jcms/publish/zglh/zxggpc/

点击一个a标签,得到一个URL,传给中间页面,在传给父页面,调用父页面方法切换iframe标签的src属性

  <a  href="${contentList.CM_PUBLISHPATH}">  ${contentList.CM_TITLE}</a><script>$("#pagelist a").click(function(){       var url = $(this).attr("href");       //得到父页面iframe要切换的URL     stayPage(url);     return false;     //阻止当前a标签的跳转})//跨域  使用第三方页面,操作父页面方法
function  stayPage(toUrl) {var h;var imgSrc;$.ajax({url: toUrl,            //请求得到的URL,得到整个页面html代码,词ajax请求要得到当前页面的heightdata: {},contentType: "html",async:false, success: function (contend) {             $("#bodyHeight").html(contend)       //得到此页面的height,传给父页面以实现 iframe 不同页面高度自适应h = $("#bodyHeight").height()imgSrc= getImgSrc();          //得到此页面的所有图片URL,上面的h变量不包括图片高度,因为图片大小为auto,在此页面通过window.οnlοad=function(){} 获取图片实际高度是要图片资源加载完成才行,但此时父页面iframe标签已经完成跳转,没用了,这里将图片URL传给父页面处理
})
// 中间页面:http://localhost:8080/TomcatTest/execA.html, 通过URL传给中间页面三个参数
if(typeof(exec_obj)=='undefined'){  exec_obj = document.createElement('iframe');  exec_obj.name = 'execframe';  exec_obj.src = 'http://localhost:8080/TomcatTest/execA.html?url='+toUrl+'&height='+h+'&imgSrc='+imgSrc;  exec_obj.style.display = 'none';  document.body.appendChild(exec_obj);  }else{  exec_obj.src='http://localhost:8080/TomcatTest/execA.html?' + Math.random()+"&url="+toUrl+'&height='+h+'&imgSrc='+imgSrc;  }
}//得到页面所有图片的URLfunction getImgSrc(){
var src="";
$("#bodyHeight img").each(function(index,domEle){  if(index ==0)src += $(this).attr("src");
elsesrc += ","+$(this).attr("src");
});
return src;
}</script>

中间页面:在父页面的项目里创建

http://localhost:8080/TomcatTest/execA.html

  <body>  <h3>execA</h3><script type="text/javascript">  var url = location.search;        //获取子页面通过URL传的参数var src = url.substring(url.indexOf("url=")+4,url.indexOf("&height"))var height = url.substring(url.indexOf("height=")+7,url.indexOf("&imgSrc"))var imgSrc = url.substring(url.lastIndexOf("=")+1)parent.parent.change(src,height,imgSrc);    //调用父页面change方法</script>  </body>

父页面:

传过来三个参数,src 用于替换iframe的src属性值,

height用于设置iframe的高度

imgSrc用于获取每个图片的真实高度

<script>function changeFrameHeight(){var ifm= document.getElementById("myframe"); ifm.height=document.documentElement.clientHeight;}window.οnresize=function(){  changeFrameHeight();  }

function change(src,height,imgSrc){  var h = Number(height)+110;        //定义iframe的父标签高度if(imgSrc != "") {                              //根据图片URL 获取图片高度var imgArr = imgSrc.split(",");imgArr.forEach(function(ele,index){ // 这里做下说明，$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象！  var img =  $("<img/>").attr("src", ele)h += img[0].height     //img[0].height 即为当前图片高度, 添加到 height 上去,这里不用load方法也可以获取,用下面的load方法也可以获取,但load方法中 如果图片地址无效,报notfound错误,则程序无法执行下去height = h-110
//          img.load(
//                  function() {
//                      /*
//                       * 如果要获取图片的真实的宽度和高度有三点必须注意 1、需要创建一个image对象：如这里的$("<img/>")
//                       * 2、指定图片的src路径 3、一定要在图片加载完成后执行如.load()函数里执行
//                       */
//                       h += this.height
//                       height = h-110if(index == imgArr.length-1){$(".homepage_main").css("height",h);$("#myframe").css("height",height);if(src.indexOf("http")== -1)     / /传的src可能是相对地址$("#myframe").attr("src","http://10.110.80.186/jcms/publish/zglh/zxggpc/"+src);else$("#myframe").attr("src",src);document.getElementById("demo").innerHTML = height;}
//                  }); }); }else{$(".homepage_main").css("height",h);$("#myframe").css("height",height);if(src.indexOf("http")==-1)$("#myframe").attr("src","http://10.110.80.186/jcms/publish/zglh/zxggpc/"+src);else$("#myframe").attr("src",src);}}
</script>

总结:

这个需求有四个问题点,

一:iframe跨域请求并穿参数,

二:iframe子页面自适应高度,

三:图片高度在子页面无法获取,

四:父页面获取图片高度时用load方法当图片地址失效时报错

参考文章:

js和jquery如何获取（图片）真实的宽度和高度

点击打开链接

iframe与主框架跨域相互访问方法

点击打开链接

iframe跨域请求相关推荐

利用iframe跨域请求
跨域是系统与系统之间信息交流的一种方式,为了获取另外一个地方的信息,经常会出现跨域,总结一下利用iframe跨域进行请求,网上关于跨域的信息很多,只做一下备忘 <!DOCTYPE html> ...
artdialog ajax,artDialog v6 iframe 跨域请求
在iframe中,打开dialog加载子页面. 思路: 父页面打开dialog,在子页面中写提交,获取当前dialog进行后续操作. 父页面拿到子页面表单,在父页面提交,直接操作dialog完成后续动 ...
使用img.src跨域请求
使用Img.src跨域请求无刷新的页面请求,被越来越多的应用.XMLHttp.Request只支持同域名的请求,Iframe支持跨域请求,但是跨域Javascript调用会被制止,使得 Ifram ...
用iframe设置代理解决ajax跨域请求问题
用iframe设置代理解决ajax跨域请求问题参考文章: (1)用iframe设置代理解决ajax跨域请求问题 (2)https://www.cnblogs.com/ranzige/p/370965 ...
关于ajax跨域请求（cross Domain）
Cross Domain AJAX主要就是A.com网站的页面发出一个XMLHttpRequest,这个Request的url是B.com,这样的请求是被禁止的,浏览器处于安全考虑不允许进行跨域访问, ...
浏览器同源策略以及跨域请求时可能遇到的问题
跨域请求基础知识浏览器的同源策略浏览器的源指的是协议://域名:端口这样的URL组合.我们首先要明确几点 www.foo.com 和 foo.com 是不同域 www.foo.com 和 ww ...
循序渐进Python3（十一） --6-- Ajax 实现跨域请求 jsonp 和 cors
Ajax操作如何实现跨域请求? Ajax (XMLHttpRequest)请求受到同源策略的限制. Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpReque ...
JSONP实现Ajax跨域请求
前言由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
用P3P header解决IE下iframe跨域访问时候session丢失的问题
用P3P header解决IE下iframe跨域访问时候session丢失的问题整合客户的登录时,或者其他一个网站通过iframe时,特别是一个http页面,访问一个https页面时,常常会sess ...

iframe跨域请求

iframe跨域请求相关推荐

最新文章

热门文章