183

Which is the right/best tag to use in my HTML file when I want to display the Adobe PDF viewer?

Right now I'm using the code below, but there are weird side effects (e.g. it seems to steal the starting focus that I've set to another <input> text box; it doesn't seem to play real well with the jQueryUI Resizeable class; etc.)

<embed src="abc.pdf" type="application/pdf" />

Could I even do the same thing with the <object> tag? Are there advantages/disadvantages to using one tag vs. the other?

Would you be able to use StringEscapeUtils.escapeJavaScript instead? If the JSON is in a <script> block that should be sufficient to avoid breaking the page and no decoding will be necessary.

4

6 回答 6

191

对象与嵌入 - 为什么不总是使用嵌入？

底线：对象是好的，嵌入是旧的。除了 IE 的 PARAM 标签之外，如果浏览器不支持 OBJECT 的引用插件，则 OBJECT 标签之间的任何内容都会被渲染，显然，无论是否渲染，内容都会被请求 http。

object是在页面上嵌入内容的当前标准标记。在w3c想到任何类似的东西之前，它就embed被 Netscape (along img)收录了。object

这是您包含 PDF 的方式object：

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
  alt : <a href="data/test.pdf">test.pdf</a>
</object>

如果您真的需要在几乎所有浏览器中显示内联 PDF，就像旧版浏览器理解embed但不理解的那样object，您需要这样做：

<object data="abc.pdf" type="application/pdf">
    <embed src="abc.pdf" type="application/pdf" />
</object>

此版本不验证。

于 2009-08-07T14:00:10.517 回答
9

2020年更新的答案：

两者<object>都<embed>包含在WHAT-WG HTML 生活标准 （2020 年 9 月）中。

<object>

object 元素可以表示外部资源，根据资源的类型，该资源将被视为图像、子浏览上下文或由插件处理的外部资源。

<embed>

embed 元素为外部（通常是非 HTML）应用程序或交互式内容提供了一个集成点。

使用一个标签与另一个标签相比是否有优点/缺点？

Mozilla 开发者网络 (MDN)的意见似乎（尽管相当微妙）略微赞成，但绝大多数情况下，MDN 都希望建议尽可能避免完全嵌入外部内容。<object><embed>

[...] 你不太可能使用这些元素——Applet 已经很多年没有使用了，Flash 不再很流行，由于多种原因（参见下面的反对插件的案例），PDF 倾向于链接比嵌入更好，图像和视频等其他内容具有更好、更容易处理的元素。插件和这些嵌入方法确实是一种遗留技术，我们主要提到它们，以防你在某些情况下遇到它们，比如 Intranet 或企业项目。

曾几何时，插件在 Web 上是不可或缺的。还记得那些为了在线观看电影而必须安装 Adob​​e Flash Player 的日子吗？然后，您不断收到有关更新 Flash Player 和 Java 运行时环境的烦人警报。此后，Web 技术变得更加强大，而那些日子已经结束。对于几乎所有应用程序，是时候停止交付依赖于插件的内容并开始利用 Web 技术了。

来源： https ://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements

于 2020-09-30T09:52:14.297 回答
6

其他一些选项：

<object type="application/pdf" data="filename.pdf" width="100%" height="100%">
</object>

<object type="application/pdf" data="#request.localhost#_includes/filename.pdf" 
        width="100%" height="100%">
  <param name="src" value="#request.localhost#_includes/filename.pdf">
</object>
于 2010-02-04T01:28:01.697 回答
4

您也可以使用 iframe 方法，尽管这不是跨浏览器兼容的（例如，不能在 chromium 或 android 以及可能的其他系统中工作 -> 而是提示下载）。它适用于 dataURL 和普通 URL，不确定其他示例是否适用于 dataURLS（请告诉我其他示例是否适用于 dataURLS？）

 <iframe class="page-icon preview-pane" frameborder="0" height="352" width="396" src="data:application/pdf;base64, ..DATAURLHERE!... "></iframe>
于 2014-07-24T17:18:32.773 回答
4

在网页上显示pdf可能最好的跨浏览器解决方案是使用Mozilla PDF.js项目代码，它可以作为node.js服务运行，使用如下

<iframe style="width:100%;height:500px" src="http://www.mysite.co.uk/libs/pdfjs/web/viewer.html?file="http://www.mysite.co.uk/mypdf.pdf"></iframe>

关于如何使用 pdf.js 的教程可以在这个弹出的博客文章中找到

于 2015-12-18T10:45:07.373 回答
2

Embed 不是标准标签，但 object 是。这是一篇看起来对您有帮助的文章，因为情况似乎并不那么简单。包括一个 PDF 示例。

于 2009-08-07T14:01:53.433 回答