iframe對應的div:

<div id="iframezone"><iframe id="iframe" frameborder='0' scrolling='no' height="0" width="0" onload="autoHeight();"></iframe></div> <li><a data-toggle="tab" href="javascript:void(0)" onclick="IframeAddSrc('/Customer/SMSRecord', this)"> 記錄 </a> </li>

點擊加載頁面到iframe。對應的js：

//iframe自適應高,onload會在iframe沒加載完時就觸發，所以要加上setTimeout,防止自適應高度出現為零的情況 function autoHeight() {setTimeout(function () {var iframe = document.getElementById("iframe");if (iframe.Document) {//ie自有屬性iframe.style.height = iframe.Document.documentElement.scrollHeight;} else if (iframe.contentDocument) {//ie,firefox,chrome,opera,safariiframe.height = screen.availHeight;// $(iframe).contents().find("body").height() + 30;iframe.width = "100%";//screen.availWidth * 0.97 - 216.4; }}, 1); }function IframeAddSrc(src, obj) {$.post("/Home/ValidateStatus").done(function (data) {if (data == undefined || data == null || data.status != "ok") {return;}$(".tabActive").removeClass("tabActive");$(obj).addClass("tabActive");src = src + (src.indexOf('?') > 0 ? "&r" : "?r") + "=" + Math.random();$("#iframe").removeAttr("src");$("#iframe").attr("src", src);if ($("#iframe").onload)$("#iframe").onload();}); }

?

轉載于:https://www.cnblogs.com/endlessdream/p/4878013.html

總結

以上是生活随笔為你收集整理的前端小结（5）---- iframe的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。