Question

<!DOCTYPE html>
<html>
<head>
    <title>My favorite app</title>
</head>
<body>

<iframe src="https://stackoverflow.com/questions/36047483/parsing-a-websites- 
html-tags-in-iframe"></iframe>

<div class="title">My App</div>
<div class="app">
    <div class="image"><img src="images/app.png" alt="this is a 
    screenshot" class="image"></div>
</div>
</body>
</html>

我尝试使用iframe标记，但是它不起作用，并且该图像出现空白部分。 the blank section that appears to me in the browsers.

Answer 1

那是因为堆栈溢出通过将X-Frame-Options设置为sameorigin来禁止在帧内使用... 因此，仅允许在Stack Overflow本身内部将其用作iframe，而不是您的代码。

长版：当您的浏览器尝试从Stack Overflow访问该URL时，Stack Overflow返回一些标头，其中之一是X-Frame-Options: sameorigin，指示您的浏览器禁止在IFrame中显示该URL，因此您的浏览器拒绝这样做。它是SO服务器配置（您对此无能为力）。

Answer 2

您在beforeMount属性中引用的“堆栈溢出”页面未显示在src元素中，因为“堆栈溢出”站点实施了iframe阻止策略。为此，它使用 iframe 。（另请参见how to block website from loading in iframe?。）

您可以通过检查网站的HTTP标头来检查网站是否实施了此策略。例如，在Firefox中，按X-Frame-Options打开检查工具，然后转到 Network ，选择通过HTTP发送的对象之一，然后查看标头（或过滤标头）例如“ x帧”）。以下是the URL you tested的外观：

注意 x-frame-options：SAMEORIGIN （位于屏幕右下方）。在服务器端设置了F12或x-frame-options: SAMEORIGIN之后，您将无法在x-frame-options: DENY或iframe内从该站点加载页面。

有关更多背景信息，请参见X-Frame-Options – How to Combat Clickjacking，该书还介绍了frame标头中可以使用的其他值。

如果要使用不阻止iframe加载的服务器上的网页进行测试，请尝试使用https://wiki.archlinux.org/index.php/Tomcat。

如何使用HTML IFRAME元素嵌入内容？

2 个答案: