牛骨文教育服务平台(让学习变的简单)
博文笔记

frame缩放 iframe随浏览器缩放

创建时间:2016-12-14 投稿人: 浏览次数:3236

---引入iframe:
<iframe src="******" id="luke" name="luke"  height="100%" width="100%"  frameborder="0"  onLoad="iFrameHeight()">

</iframe>

 
//---当窗口变化时设置iframe的宽度为100%,这样就可以随意缩放;
//---如果采用reload也是可以的,但是有时会造成死循环。因为reload会导致resize,而resize有导致reload
window.onload = function(){
   //浏览器窗口缩放时,自动缩放iframe
   $(window).resize(function() {
      var ifm= document.getElementById("luke");
      var subWeb = document.frames ? document.frames["luke"].document : ifm.contentDocument;
      if(ifm != null && subWeb != null) {
         ifm.width = "100%";
      }
   });
}

function iFrameHeight() {                             //iframe窗口大小根据内容确定
   var ifm= document.getElementById("luke");
   var subWeb = document.frames ? document.frames["luke"].document : ifm.contentDocument;
   if(ifm != null && subWeb != null) {
      ifm.height = subWeb.body.scrollHeight;
      ifm.width = subWeb.body.scrollWidth;
   }
}


声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。