疫情数据分析平台工作报告【5】HTML图片嵌入

最新推荐文章于 2024-10-29 10:16:49 发布

m0_55675803

最新推荐文章于 2024-10-29 10:16:49 发布

阅读量111

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_55675803/article/details/125139531

版权

由于我们生成的图片全是html格式的独立内嵌档案,因此要想办法把html嵌入前端。

一开始考虑直接使用

HTML 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。
但是有一个问题: 大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果望网站可以在普通用户的浏览器上运行，那么依靠是不明智的。

Content categories	Flow content, phrasing content, embedded content, interactive content, palpable content.
Permitted content	None, it is an empty element.
Tag omission	Must have a start tag, and must not have an end tag.
Permitted parents	Any element that accepts embedded content.
Permitted ARIA roles	application, document, img, presentation
DOM interface	HTMLEmbedElement (en-US)

属性

这个元素的属性包括全局属性。

height
资源显示的高度，in CSS pixels. – (Absolute values only. NO percentages)
src
被嵌套的资源的 URL。
type
用于选择插件实例化的 MIME 类型。
width
资源显示的宽度，in CSS pixels. – (Absolute values only. NO percentages)

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

HTML Living Standard	Living Standard
HTML5	Recommendation

还是换用极为先进的Iframe吧。

Iframe的优点:几乎支持全部浏览器。

但是缺点也很明显:阻塞网页载入,并且和SEO冲突。

最简单的方法就是输入网址:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Main Page</title>
</head>
<body>
     <span>This is main page.</span>
     <iframe frameborder="0"
             noresize="noresize"
             style="position: absolute; background: transparent; width: 100%; height:100%;"
             src="https://clay-atlas.com"
             frameborder="0">
     </iframe>

</body>
</html>

然后第二种是从文件的形式嵌入。

在这里插入图片描述

要把第一个文件嵌入第二个文件。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Main Page</title>
</head>
<body>
     <span>This is main page.</span>
     <iframe frameborder="0"
             noresize="noresize"
             style="position: absolute; background: transparent; width: 100%; height:100%;"
             src="iframe.html"
             frameborder="0">
     </iframe>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Main Page</title>
</head>
<body>
     <span>This is iframe page.</span>
</body>
</html>

然后让main文件中的iframe标签scr属性指向另一个文件即可。

也可以在iframe中直接输入html。将src参数改成srcdoc。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Main Page</title>
</head>
<body>
     <span>This is main page.</span>
             <iframe srcdoc="<div>hello</div>"</iframe>
</body>
</html>