我的測驗網頁得到了這一行<embed src="https://drive.google.com/file/d/17Z3Zvt63p3nI-C0BnOhPd75X5LSBi6dh/view?usp=sharing" width="840px" height="500px"/>來顯示存盤在谷歌驅動器上的 PDF。在訪問網頁時，我發現錯誤“drive.google.com 拒絕連接”。如果我只是將鏈接復制粘貼到瀏覽器中，則此檔案已公開共享并可查看。你能幫我糾正這個嗎？
在檢查控制臺時，我看到此訊息“拒絕在框架中顯示‘https://drive.google.com/’，因為它將‘X-??Frame-Options’設定為‘sameorigin’。”
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Active/current link */
.navbar a.active {
background-color: #666;
color: white;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
.embed-pdf {
width: 840px;
height: 500px;
margin: auto;
}
.pdfobject { border: 1px solid #666; }
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>A <b>responsive</b> website created by me.</p>
</div>
<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="embed-pdf">
<iframe src="https://drive.google.com/file/d/17Z3Zvt63p3nI-C0BnOhPd75X5LSBi6dh/preview" width="640" height="480" allow="autoplay"></iframe>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
uj5u.com熱心網友回復：
您的源鏈接格式錯誤。
您是否使用 在這里并不重要，因為標簽不知道如何處理您提供的來源。
要從驅動器中嵌入檔案，您必須通過在鏈接中添加“預覽”而不是“查看”來特別提及它。
正確的來源鏈接：
ps：抱歉我訪問了你的檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/351193.html
上一篇：陣列.map與.map中的Ruby整數元素！？以及如何檢查哪個代碼最好？
下一篇：pdf檔案中的多行正則運算式