iframe使用躲避全局CSS样式

最新推荐文章于 2024-06-15 06:21:07 发布

dante_k7

最新推荐文章于 2024-06-15 06:21:07 发布

阅读量1.8k

点赞数

分类专栏： JQuery 文章标签： iframe css 文本编辑 function xhtml 测试

本文链接：https://blog.csdn.net/dante_k7/article/details/5776401

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用过“富文本编辑器”的朋友可能知道，在编辑器里面所写的内容，如果有样式修改，在网页显示的时候，可能跟自己所写的内容有较大区别。原因在于页面上定义过了全局CSS。那么如何躲避全局CSS呢？可以使用iframe处理之。。。。。

参考例子如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iframe躲避全局CSS样式</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function(){ var contents = $(":hidden[name=contents]").val(); $("#ifeContents").contents().find("body").append(contents); //iframe自动适应文本内容高度 window.setInterval("reinitIframe()", 200); }); /** * reinitIframe * * @return void */ function reinitIframe() { var iframe = $("#ifeContents")[0]; var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; } </script> </head> <body> <form name="frm" method="post"> <input name="contents" type="hidden" value="测试数据测试数据测试数据"/> <iframe id="ifeContents" frameborder="0" allowtransparency="true" tabindex="0" src="" style="width: 100%;" scrolling="auto"></iframe> </form> </body> </html>

PS：

在使用iframe的时候，需要注意的它的“滚动条”，如果不希望见到滚动条的话，就需要让iframe自适应高度。具体写法在上述代码中。

dante_k7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe使用躲避全局CSS样式

<br />使用过“富文本编辑器”的朋友可能知道，在编辑器里面所写的内容，如果有样式修改，在网页显示的时候，可能跟自己所写的内容有较大区别。原因在于页面上定义过了全局CSS。那么如何躲避全局CSS呢？可以使用iframe处理之。。。。。<br /> <br />参考例子如下：<br /> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr
复制链接

扫一扫