可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I m embeding a pdf document into my html code. For this i have wrote this code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org

/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>
<object height="100%" width="100%" type="application/pdf" data="yii.pdf#toolbar=1&amp;navpanes=0&amp;scrollbar=1&amp;page=1&amp;view=FitH">

<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="/pdf/sample.pdf">click here to download the PDF file.</a></p>

</object>

</body>
</html>

But result is empty page on FF4 and IE9 embeds pdf file but its container is very small almost 30% of page. if I remove first line i.e DOCTYPE both browsers renders pdf file as it should. Following code works fine.

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>
<object height="100%" width="100%" type="application/pdf" data="yii.pdf#toolbar=1&amp;navpanes=0&amp;scrollbar=1&amp;page=1&amp;view=FitH">

<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="/pdf/sample.pdf">click here to download the PDF file.</a></p>

</object>

</body>
</html>

I want to use doctype in my page so that other pages work fine. Is there a way to fix first code that contains doctype?

回答1:

I would try with an <iframe> element.
If not, maybe transforming it into flash and then embedding the flash.

Also, try <!doctype html> and see what it does, that's the standard doctype for HTML5

回答2:

This is basically @tXK's answer (+1), but with working (battle tested) code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    border: 0;

    height: 100%;
    overflow: hidden;
}
iframe {
    width: 100%;
    height: 100%;
    border: 0
}
</style>
</head>

<body>

<iframe src=""></iframe>

</body>
</html>

回答3:

There are THREE ways to show a PDF in HTML: using embed, object, or iframe. Unfortunately using iframe will not allow the Adobe Javascript inside the PDF to post messages to the JS in HTML, because the hostContainer is undefined. Therefore I am forced to use embed or object. Fortunately thirtydot's style code also works great for object. Here is my working code...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    overflow: hidden;
}
object {
    width: 100%;
    height: 100%;
    border: 0
}
</style>
<script language="javascript">
    function handleMessage(msg) {
      alert('got message '+msg);
    }
    function setupHandler() {
      document.getElementById("myPdf").messageHandler = { onMessage: handleMessage };
    }
</script>
</head>
<body onLoad="setupHandler();">
<object id="myPdf" type="application/pdf" data="file_with_actions.pdf">
Unable to open the PDF file.
</object>
</body>
</html>

You can read more about the Javascript stuff here.