uniapp 项目中 iframe 使用问题

目前碰到一个功能：后端返回一个网页的源代码，

例：  
 1 <!doctype html>
 2 <html> 
 3     <head> 
 4         <meta charset="utf-8"> 
 5         <title>新标签页</title> 
 6         <style></style> 
 7     </head> 
 8     <body>
 9         内容
10         <script type="module" src="x'x'x.js"></script> 
11         <link rel="stylesheet" href="x'x'x.css">
12     </body>
13 </html>



然后将这段代码展示在自己的开发使用中。

因为，后台返回的 html内容的高我不知道，

所以我不能设置 iframe的高，

而不设置iframe的高，iframe标签就会默认高为150px，会导致后端返回的内容无法完美的呈现出来。

 

历经艰辛，终于找到一个解决方法：

 

1         <iframe onload="this.height=this.contentWindow.document.body.scrollHeight" name="toppage" width=100% marginwidth=0 marginheight=0 frameborder="no" border="0"  :srcdoc="article_description" ></iframe>
onload="this.height=this.contentWindow.document.body.scrollHeight"            

使用这段代码，获取后端返回的html内的body的高，并把高赋值给iframe


:srcdoc="article_description"

因为返回的不是url，所以不能使用src，   srcdoc -> 规定页面中的 HTML 内容显示在 <iframe> 中   所以此处使用的是  srcdoc  

article_description

这个变量储存的是后台返回的html内容。



详细请移步查看：https://cloud.tencent.com/developer/article/1326943
posted @ 2022-06-14 18:19  伊人兮明眸秋水  阅读(4470)  评论(2)  编辑  收藏  举报