700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > js跨域问题之跨域iframe自适应大小实现代码【javascript】

js跨域问题之跨域iframe自适应大小实现代码【javascript】

时间:2021-02-22 09:53:43

相关推荐

js跨域问题之跨域iframe自适应大小实现代码【javascript】

web前端|js教程

跨域,iframe,自适应大小

web前端-js教程

明星个人flash网站源码,vscode运行脚本文件,ubuntu 安装威信,tomcat的日志检查,python 爬虫视屏,php代码加密方式,合肥企业seo要多少钱lzw

function setHeight(){

var dHeight = document.documentElement.scrollHeight;

var t = document.createElement("div");

t.innerHTML = \;

document.documentElement.appendChild(t.firstChild);

}

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

java 娱乐源码,vscode静默安装脚本,软件中心ubuntu,面试tomcat工作原理,sqlite3 添加数据,爬虫保留单元格换行符,php加密程序,庐阳区seo网络推广公司,做个彩票网站,管理页面登录模板下载lzw

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

php祝福墙源码,ubuntu换arch源,床上爬虫怎么清除,php7 php fpm,北宁seo优化lzw

问题:

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跨域操作问题也可以按这个思路去解决

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。