需求介绍:
项目里要往web页面埋 facebook 的投稿,接口返回资源 如下:
<iframe id="hankyumensosaka" src="https://www.facebook.com/plugins/post.php?width=350&href=https://www.facebook.com/306922136507980/posts/327540447779482"
width="350" height="500" style="border:none; overflow:auto;" scrolling="no" frameborder="0" allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
展示效果如图:
并没有将内容完全展现出来,并且frame里面的 body 的 overflow 样式是 hidden 的
导致没有 body 的 scrollheight 与 frame 的 height 是一样的
所以,想改变 frame body 的 overflow 为 auto,使之出现滚动条,以便获取真实的 scrollheight
<script>
function changeFrameHeight(){
var iframes = document.getElementsByTagName('iframe');
$.each(iframes, function(idx, iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
var iframeBody = iframeWin.document.body;
if (iframeBody) {
iframeBody.style.overflowY='auto';
alert (iframeBody.scrollHeight);
}
});
}
window.onload=function(){
changeFrameHeight();
}
</script>
查来查去,最后得出结果是:无法实现
原因是 iframe 跨域问题:
由于跨域问题,不能通过 js代码改变 iframe (domain:www.facebook.com)的body的 css属性,即 无法通过pia的js代码去改变 iframe body的 overflow-y为auto,进而无法获取 iframe body的 scrollHeight
虽然无法实现,但是知识点还是要记一下的,以防以后用到
1. iframe高度随内容自适应的方法
摘自:https://www.cnblogs.com/ali-king/p/9412783.html
我们知道,iframe最大的问题,就是高度的问题,如果你内容的高度是变化,要么你就给你的容器写个固定的高度,如果内容是未知的,显然这个方法并不能达到我们的想要的效果,要么就是通过js来解决这个问题。
以下是我测试的两个页面示例:
1.1、未自适应的界面
我们可以看到,这个页面显然是没有高度自适应的,这里我也没有设置高度, 是iframe默认的高度来支撑内容。
1.2、高度自适应页面
<iframe frameborder="1" width="1000" src="s2.html" name="myframe2" scrolling="no"
onload="this.height=myframe2.document.body.scrllHeight">
</iframe>
通过计算,iframe达到了高度自适应。
使用iframe标签,需要注意:
我在使用iframe的过程中,将iframe标签写成了单标签的形式,结果导致底部内容不显示。
正确的标签写法是这样的:<iframe></iframe>
去掉iframe中滚动条的方法 scrolling="no"
scrolling有三个属性值,分别是 auto(默认为滚动显示)、no(不显示滚动天) 、yes(显示滚动条);
如果你的项目中有很多的iframe使用,关于高度问题 ,你可以看一下这个链接里面的内容:http://caibaojian.com/iframe-adjust-content-height.html
--------------------------------------------------------------------------------------------------------
2. 跨域下的iframe自适应高度
以下内容摘自: http://caibaojian.com/iframe-adjust-content-height.html
跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。 方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。 我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。 a.html中包含iframe:
<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>
在c.html中加入如下代码:
<iframe id="c_iframe" height="0" width="0" src="http://www.a.com/agent.html" style="display:none" ></iframe>
<script type="text/javascript">
(function autoHeight(){
var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height; // 这里通过hash传递b.htm的宽高
})();
</script>
最后,agent.html中放入一段js:
<script type="text/javascript">
var b_iframe = window.parent.parent.document.getElementById("Iframe");
var hash_url = window.location.hash;
if(hash_url.indexOf("#")>=0){
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
}
</script>
agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制
----------------------------------------------------------------------------------------------------------