错误消息 "drive.google.com refused to connect."

Question

我的测试网页得到这一行 <embed src="https://drive.google.com/file/d/17Z3Zvt63p3nI-C0BnOhPd75X5LSBi6dh/view?usp=sharing" width="840px" height="500px"/> 以显示存储在 google 驱动器上的 PDF。在访问该网页时，我发现错误“drive.google.com 拒绝连接。”如果我只是将 link 复制粘贴到浏览器中，该文件已被公开共享和查看。你能帮我纠正一下吗？

在检查控制台时，我看到这条消息“拒绝在框架中显示 '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>

Answer 1

您的来源 link 格式不正确。

在这里您是否使用并不重要，因为标签不知道如何处理您提供的源。

要从驱动器嵌入文件，您必须通过在 link.

正确的来源link：

https://drive.google.com/file/d/17Z3Zvt63p3nI-C0BnOhPd75X5LSBi6dh/preview

这是您提供的来源：

https://drive.google.com/file/d/17Z3Zvt63p3nI-C0BnOhPd75X5LSBi6dh/view?usp=sharing

注意：您还可以通过单击屏幕右上角的 3 个点并找到“嵌入项目”选项来获取嵌入代码。

ps：抱歉我访问了你的文件

错误消息 "drive.google.com refused to connect."

Error message "drive.google.com refused to connect."

html

pdf

frontend

backend

google-docs