视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js跨域问题之跨域iframe自适应大小实现代码_javascript技巧
2020-11-27 20:54:09 责编:小采
文档


代码如下:


function setHeight(){
var dHeight = document.documentElement.scrollHeight;
var t = document.createElement("div");
t.innerHTML = '';
document.documentElement.appendChild(t.firstChild);
}


我想着跨域如何解决啊!后来去网上搜索了一下子 恍然大悟

具体如下 我是复制过来了 大家重点理解一下子它的实现思路 :


问题:

A域名下的页面a.htm中通过iframe嵌入B域名下的页面b.html,由于b.html的大小等是不可预知而且会变化的,所以需要 a.htm中的iframe自适应大小.

问题本质 :

js的跨域问题,因为要控制a.htm中iframe的大小就必须首先读取得到b.html的大小,A、B不属于同一个域,js的访问受限,读取不 到b.html的大小.

解决方案:

首先前提是A,B是合作关系,b.html中能引入A提供的js

首先a.html中通过iframe引入了b.html

代码如下:



B在b.html中引入了A提供的js文件

Html代码
代码如下:


该js首先读取b.html的宽和高,然后创建一个iframe,src为和A同一个域的中间代理页面a_proxy.html,吧读取到的宽和 高设置到src的hash里面

Html代码
代码如下:


a_proxy.html是A域下提供好的中间代理页面,它负责读取location.hash里面的width和height的值,然后设置与 它同域下的a.html中的iframe的宽和高.

Js代码
代码如下:
var pParentFrame = parent.parent.document.getElementById("aIframe");
var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash;
pParentFrame.style.width = locationUrlHash.split("#")[1].split("|")[0]+"px";
pParentFrame.style.height = locationUrlHash.split("#")[1].split("|")[1]+"px";
var pParentFrame = parent.parent.document.getElementById("aIframe");
var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash;
pParentFrame.style.width = locationUrlHash.split("#")[1].split("|")[0]+"px";
pParentFrame.style.height = locationUrlHash.split("#")[1].split("|")[1]+"px";

这样的话a.html中的iframe就自适应为b.html的宽和高了.

其他一些类似js跨域操作问题也可以按这个思路去解决

下载本文
显示全文
专题