利用iframe嵌入html页面 （实用, 赞） |
您所在的位置：网站首页 › html的iframe标签 › 利用iframe嵌入html页面 （实用, 赞） |
利用iframe嵌入html页面 （实用, 赞）
|
效果图： a.html (被嵌入页面） 
你好吗！ 你猜猜! 错了！>
index.js (提供2种计iframe高度的方法） 方案一： 自适应 iframe 内容高度 //function setIframeHeight() { // var iframe = document.getElementById("my-frame"); // try { // var userAgent = window.navigator.userAgent; //取得浏览器的userAgent字符串 // if (userAgent.indexOf("Chrome") > -1) { // //documentElement 不能替换成body 否则 google浏览器不兼容 // var bHeight = iframe.contentWindow.document.documentElement.scrollHeight; // } else { // //documentElement 不能替换成body 否则 google浏览器不兼容 // var bHeight = iframe.contentWindow.document.body.scrollHeight; // } // iframe.height = bHeight; // } catch (ex) { // } //} //window.onload = function () { // window.setTimeout("setIframeHeight()", 200); //} //方案二：用onload function getDocHeight(doc) { doc = doc || document; var body = doc.body; var html = doc.documentElement; var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); return height; } function setIframeHeight(id) { var ifrm = document.getElementById(id); var doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document; ifrm.style.visibility = 'hidden'; ifrm.style.height = "10px"; // reset to minimal height ... ifrm.style.height = getDocHeight(doc) + 4 + "px"; ifrm.style.visibility = 'visible'; }【注意点】 1、禁止网页缩放； (设 meta name="viewport" ...) 2、计算iframe的高度; (选js中其种一种方案） 3、处理iframe的宽度；（设iframe宽度） 4、图片宽度的处理； (设a.html内图片宽度) 5、如果出现乱码，将html文件以UTF-8格式存储； 6、强调：必须要在发布后才能看到效果！必须要在发布后才能看到效果！必须要在发布后才能看到效果！
参考资料：《iframe自适应高度》https://cloud.tencent.com/developer/article/1410326 附图片：a1.jpeg |
index.html (主页面）
【本文地址】
今日新闻 |
推荐新闻 |