在相同的選項卡中打開PDF全窗口大小 - 網絡開發

我是網絡開發新手，我想在當前瀏覽器選項卡中以完整窗口大小打開PDF。我嘗試使用HTML object與我的PDF路徑爲data。然後在CSS中我說width:100%; height:100%;。這最終只顯示了100％的寬度和更小的高度，我該如何解決？在相同的選項卡中打開PDF全窗口大小 - 網絡開發

來源

2017-09-02 Johnson

<!DOCTYPE html> 
 

 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <style> 
 
     embed { 
 
      width:100%; 
 
      height:100%; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <a href="#" onclick="launchFullscreen(document.documentElement);">PDF</a> 
 
</body> 
 
    <script> 
 
     function launchFullscreen(element) {   
 
      if (element.requestFullscreen) { 
 
       element.requestFullscreen(); 
 
      } else if (element.mozRequestFullScreen) { 
 
       element.mozRequestFullScreen(); 
 
      } else if (element.webkitRequestFullscreen) { 
 
       element.webkitRequestFullscreen(); 
 
      } else if (element.msRequestFullscreen) { 
 
       element.msRequestFullscreen(); 
 
      } 
 
      document.body.style.height = "100vh"; 
 
      document.body.style.overflow = "hidden"; 
 
      document.body.innerHTML = '<embed src="sys.pdf" />'; 
 
     } 
 
    </script> 
 
</html>

要打開當前選項卡的東西，你可以使用一個錨標記的目標屬性，例如：

<a href="name.pdf" target="_self">PDF</a>

強制瀏覽器打開的網頁在全屏模式下，你可以使用全屏API，如下文所述：https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

代碼示例和一些演示你可以在這裏找到：https://davidwalsh.name/fullscreen

更新：

檢查代碼段。您只需將第30行的embed標記的src屬性值更改爲您的pdf路徑。

UPDATE2：

要調整瀏覽器窗口，你可以調用risezeTo（）函數。但是，它有幾個限制，在那裏描述（例子）：https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo。

簡而言之：即使在瀏覽器中打開一個選項卡，也不允許在所有瀏覽器中調整窗口大小。在某些瀏覽器中，只有在當前選項卡是唯一的選項卡時纔可以這樣做。在其他情況下，你甚至不能這樣做。但是，您可以使用特定寬度和高度的window.open（）打開一個新窗口，並在其中加載您的pdf文件。文檔和示例如下：https://developer.mozilla.org/en-US/docs/Web/API/Window/open

來源

2017-09-02 09:43:59

嗨，感謝您的回答，但這不是我要找的：您的代碼在新選項卡中打開PDF並且不在同一個選項卡中，您知道如何解決該問題嗎？ – Johnson

請檢查我的更新到答案。 –

我想你誤會了：我不想全屏打開文檔，但是在瀏覽器窗口的大小上，很抱歉讓你等待 – Johnson

在相同的選項卡中打開PDF全窗口大小 - 網絡開發

回答

相關問題