iframe不显示滚动条并且设置动态高度、添加内部样式和脚本

html 复制代码
<iframe id="myIframe" frameborder="0" width="100%" scrolling="no" onload="this.height = this.contentWindow.document.body.scrollHeight+300">
</iframe>
javascript 复制代码
$('#myIframe').load(function () {
				//body{text-align:center;}
				// table{margin:0px auto;}
				$('#myIframe').contents().find("head").append($(`<style>
				ol{
					list-style:none !important;
					list-style-type:none !important;
				}
				ul{
					list-style:none !important;
					list-style-type:none !important;
				}
				table{border-top:1px solid #7F7F7F!important;border-left:1px solid #7F7F7F!important;border-collapse:collapse;}
				table td{
					border-bottom:1px solid #7F7F7F!important;border-right:1px solid #7F7F7F!important;padding:5px 12px;
					word-break:break-all !important;word-wrap:break-word !important;
					vertical-align:middle !important;text-align:center !important;
				}
				</style>`));
				$('#myIframe').contents().find("head").append($(`<link rel="stylesheet" type="text/css" href="static/Ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"/>`));

				var script   = document.createElement("script");
				script.type  = "text/javascript";
				script.charset  = "utf-8";
				script.text   = `
					const pre = document.getElementsByTagName('pre');
					for(let me of pre){
						me.setAttribute("class","syntaxhighlighter");
					}
					`;
				$('#myIframe').contents().find("head").get(0).appendChild(script);

				setTimeout(function(){//一定要加延时,不然有问题
					$('#myIframe').get(0).height = $('#myIframe').get(0).contentWindow.document.body.scrollHeight+300;//多加点
				}, 100);
			});
相关推荐
在下胡三汉几秒前
创建轻量级 3D 资产 - Three.js 中的 GLTF 案例
开发语言·javascript·3d
脸大是真的好~5 分钟前
黑马JAVAWeb -Vue工程化 - Element Plus- 表格-分页条-中文语言包-对话框-Form表单
前端·javascript·vue.js
程序猿_极客7 分钟前
【期末网页设计作业】HTML+CSS+JS 香港旅游网站设计与实现 (附源码)
javascript·css·html
一个小潘桃鸭8 分钟前
记录:echarts tooltip内容过多时,会导致部分内容遮挡
前端
小满zs18 分钟前
Next.js第四章(路由导航)
前端
进击的野人20 分钟前
深入理解 CSS4 新特性:CSS 变量
前端·css
DevUI团队21 分钟前
🚀 MateChat发布V1.10.0版本,支持附件上传及体验问题修复,欢迎体验~
前端·vue.js·人工智能
用户3458482850523 分钟前
Vue是怎么实现双向绑定的
前端
彩虹下面30 分钟前
手把手带你阅读vue2源码
前端·javascript·vue.js
华洛31 分钟前
经验贴:Agent实战落地踩坑六大经验教训,保姆教程。
前端·javascript·产品