iframe 标签实战技巧

喜欢ヅ旅行 2022-07-16 12:12 240阅读 0赞

--------------------

> 在其他大网站上看到了html源码在线预览的功能，自己心痒也做了一个，其中使用了iframe标签。在此分享有关它的一些问题：写入html代码，高度自适应，加载onload方法。

--------------------

#### iframe 写入html代码 ####

这是项目中使用到的，idName是id的值，错误的写法是直接用html("iframe...")；导致的结果就是没内容

var ifmWin=$("<iframe id='htmlView' scrolling='no' frameborder='0'></iframe>").appendTo("pre").get(0).contentWindow; ifmWin.document.write($(idName).text()); $(idName).html(""); $(idName).append(ifmWin);

--------------------

#### 高度自适应 ####

网上有很多方法，但是让我最满意的是这个：[http://www.cnblogs.com/slyzly/articles/2422737.html][http_www.cnblogs.com_slyzly_articles_2422737.html]

var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false; var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false; var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false; var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false; var isIE = (!!window.ActiveXObject || "ActiveXObject" in window); var isIE9More = (! -[1, ] == false); function reinitIframe(iframeId, minHeight) { try { var iframe = document.getElementById(iframeId); var bHeight = 0; if (isChrome == false && isSafari == false) bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = 0; if (isFireFox == true) dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2; else if (isIE == false && isOpera == false) dHeight = iframe.contentWindow.document.documentElement.scrollHeight; else if (isIE == true && isIE9More) {//ie9+ var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId); if (heightDeviation == 0) { bHeight += 3; } else if (heightDeviation != 3) { eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight); bHeight += 3; } } else//ie[6-8]、OPERA bHeight += 3; var height = Math.max(bHeight, dHeight); if (height < minHeight) height = minHeight; iframe.style.height = height + "px"; } catch (ex) { } } function startInit(iframeId, minHeight) { eval("window.IE9MoreRealHeight" + iframeId + "=0"); window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100); }

--------------------

#### 加载onload方法 ####

因为iframe中的html代码是浏览器加载结束后填充的，加载onload方法变得有些麻烦，在不断尝试和实践中，如下可以解决`window.onload = onloadMethod();``function onloadMethod(){...}`注意js要放在body内。

更多干货等你来拿：[http://www.itit123.cn/blog/detail/16.html][http_www.itit123.cn_blog_detail_16.html]

--------------------

[http_www.cnblogs.com_slyzly_articles_2422737.html]: http://www.cnblogs.com/slyzly/articles/2422737.html
[http_www.itit123.cn_blog_detail_16.html]: http://www.itit123.cn/blog/detail/16.html

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 iframe的使用和替代iframe的标签

1:ifram的重要属性的src(路径和请求都需要加上协议,不然iframe加载不出来) <div> <h1 onclick="getIframe()"

川长思鸟来/ 2024年04月08日 08:16/ 0 赞/ 131 阅读

相关 iframe标签快速使用

iframe，页面框架，可实现不刷新，在局部打开新页面展示数据代码示例： <div class="left"> <ul id="menu">

约定不等于承诺〃/ 2023年10月06日 10:07/ 0 赞/ 14 阅读

相关 iframe标签解释下

iframe是HTML中的一个标签，用于在一个网页中嵌入另一个网页或文档。通过使用iframe，可以在网页中显示其他网页或内容，而不需要离开当前网页。使用iframe时，可

不念不忘少年蓝@/ 2023年09月29日 23:28/ 0 赞/ 46 阅读

相关 iframe标签全屏

当vue网页中引入iframe时，想要在iframe中操作使得iframe全屏化 <iframe allowfullscreen="t

r囧r小猫/ 2022年11月21日 03:58/ 0 赞/ 418 阅读

相关 frameset标签、frame标签、iframe标签实现页面部局

frame，是网页开发必须掌握的知识。例如后台架构、局部刷新，页面分割，都是frame的用途表现，尤其是后台页面制作，使用frame会给用户带来非常舒适的使用感受。

系统管理员/ 2022年08月01日 02:56/ 0 赞/ 239 阅读

相关 iframe 标签实战技巧

-------------------- > 在其他大网站上看到了html源码在线预览的功能，自己心痒也做了一个，其中使用了iframe标签。在此分享有关它的一些问题：写入h

喜欢ヅ旅行/ 2022年07月16日 12:12/ 0 赞/ 241 阅读

相关 iframe标签

1.<iframe>优点：解决加载缓慢的第三方内容如图标和广告等的加载问题 Security sandbox

╰+哭是因爲堅強的太久メ/ 2022年07月15日 08:52/ 0 赞/ 238 阅读

相关 iframe结束标签

iframe的坑，之前从来没有注意过，在页面上添加iframe的时候结束标签使用以下写法： <iframe src='' id='' frameborder='0'

Dear 丶/ 2022年05月14日 15:16/ 0 赞/ 617 阅读

相关 html 内嵌标签iframe

内嵌标签:在当前网页内加载另一个网页的资源，多个网页互不干扰 <iframe></iframe> 属性: src

系统管理员/ 2021年07月24日 22:10/ 0 赞/ 499 阅读

相关 HTML <iframe>标签

此标签用于创建一个行内框架，可以引入外部的网页文档。 `<frame>`与`</frame>`之间可以包含文本，不过这些内容是当浏览器不支持此标签时才会显示。

小灰灰/ 2020年05月16日 19:15/ 0 赞/ 808 阅读