在工作中，我们可能会遇到自己公司和其他的公司达成合作关系，从而共同开发某个项目。而这时候，我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下，我们一般都会选择去使用iframe达到我们的目的。但是iframe用起来，真的是让人头痛，高度无法控制，难看的滚动条等等，下面我分享一下自己在处理iframe时的一些心得。
高度自适应
<iframe src="https://www.mizhanw.com/" id="myiframe" frameborder=no scrolling="yes" style=" overflow-x:scroll; overflow-y:hidden; " width="100%" ></iframe>
<script type="text/javascript" language="javascript">
var ifm= document.getElementById("myiframe");
ifm.height=document.documentElement.clientHeight;
</script>
高度自适应并且隐藏滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<script type="text/javascript">
function showS() {
document.getElementById("test").scrolling = "yes";
document.getElementById("test").style.overflow = "scroll";
}
function hideS() {
document.getElementById("test").scrolling = "no";
document.getElementById("test").style.overflow = "hidden";
}
function loadIframe() {
var iframe = document.getElementById("test");
iframe.src = "https://www.mizhanw.com/";//自定义地址
if (iframe.attachEvent) {
iframe.attachEvent("onload", function() {});
} else {
iframe.onload = function() {};
}
}
</script>
</head>
<body onload="loadIframe()">
<div class="ifr" onMouseOut="hideS()" onMouseOver="showS()" style="width: 100%; height: 100%;">
<iframe id="test" width="100%" height="100%" frameborder="0" src="" style="margin:0px;"></iframe>
</div>
<style>
.ifr {
width: 600px;
height: 600px;
background: #fff;
overflow: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
</style>
</body>
</html>
如果需要多域名随机调用，下面是我改过的代码。
<script type="text/javascript">
var urls = [
"https://www.mizhanw.com/",
"https://www.mizhanw.com/",
"https://www.mizhanw.com/",
"https://www.mizhanw.com/"
];
function showS() {
document.getElementById("test").scrolling = "yes";
document.getElementById("test").style.overflow = "scroll";
}
function hideS() {
document.getElementById("test").scrolling = "no";
document.getElementById("test").style.overflow = "hidden";
}
function loadIframe() {
var iframe = document.getElementById("test");
var randomIndex = Math.floor(Math.random() * urls.length);
iframe.src = urls[randomIndex];
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
// hideS();
// document.getElementById("loading").style.display="none";
});
} else {
iframe.onload = function(){
// hideS();
// document.getElementById("loading").style.display="none";
};
}
}
</script>
正文完