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);
			});
相关推荐
_yingty_9 分钟前
GO语言入门经典-反射3(Value 与对象的值)
开发语言·前端·后端·学习·golang
糟糕好吃23 分钟前
如何用一个插件让你的 Taro 项目启动快 3 倍?
前端·javascript·微信小程序
糖墨夕38 分钟前
【1】Three.js入门心得记-开发环境及准备工作
前端·three.js
前端_学习之路43 分钟前
Vue--状态管理pinia
前端·javascript·vue.js
萌萌哒草头将军1 小时前
🔥🔥🔥MCP TypeScript SDK 初体验:挑战快速搭建一个 AI 应用!
前端·javascript·mcp
qq_316837751 小时前
uniapp 打包 H5 向 打包的APP 使用 @dcloudio/uni-webview-js 传值
开发语言·javascript·uni-app
冴羽yayujs1 小时前
SvelteKit 最新中文文档教程(19)—— 最佳实践之身份认证
前端·javascript·vue.js·react.js·前端框架·svelte·sveltekit
Dove言和1 小时前
vue-element-plus-admin的安装
前端·javascript·vue.js·element-plus
曾是惊鸿照影来1 小时前
vue2生成二维码海报,支持复制,下载
前端
观无1 小时前
vue的主要核心文件介绍
前端·javascript·vue.js