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);
			});
相关推荐
半个落月6 小时前
LangSmith 全链路观测(下):用 Dataset 与 LLM Judge 量化评估 RA
javascript·langchain
半个落月6 小时前
LangSmith 全链路观测(上):用 LangGraph 与 Milvus 构建可追踪的 RAG 客服
javascript·langchain
Java后端的Ai之路7 小时前
06-React-Props
前端·react.js·前端框架
半个落月7 小时前
LangChain.js Agent 中间件实战:生命周期、动态工具与文件权限
javascript·langchain
Flynt7 小时前
开源"间谍卫星"说数据全是真的,我把它的免key数据源挨个试了一遍
前端·开源·数据可视化
Csvn8 小时前
渲染管线
前端
程序员大阳8 小时前
副队长CSS教程(33)–圆角与透明
前端·css·透明·圆角
志尊宝8 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
鬼手点金9 小时前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
柳杉9 小时前
借助 Codex 和可视化工作流,从调研到完整实现,3D 大屏竟然可以这么简单
前端·ai编程·数据可视化