如何在 div 悬停时预览我的 Stack Overflow 配置文件

Question

这里我有一个 Bootstrap 弹出窗口，我在其中放置了一个 iframe 来显示我的 SO 配置文件作为预览，但 HTTP 响应 header 不允许在我的本地机器上渲染它，但它在这里工作正常。任何建议都会有所帮助

$(document).ready(function(){
$('[rel="popover"]').popover();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" id="blob2" class="btn large primary" data-trigger="hover"  rel="popover" data-html="true" data-content='<iframe frameborder="0" scrolling="no" height="420" width="420"
src="http://whosebug.com/users/5336321/hitesh-misro"></iframe>' style="margin-top: 100px">hover for popover</a>

Answer 1

在除 SO 之外的任何其他第三方域中托管的页面上打开 <iframe> 中的 SO 页面是不可能的我猜是因为堆栈溢出设置 X-Frame-Options:SAMEORIGIN 作为响应 header .这意味着这些 SO url 只能在 SO 域内托管的网页上的 iframe 中打开。所以简单地回答你的问题；在您自己的网站中不可能有一个 iframe 并且 src 指向您的个人资料页面。

您可以使用 User Flair

而不是这个

为您的 popover 代码；你可以这样尝试，这将在弹出窗口中显示用户的天赋：

$(document).ready(function() {
  $('[rel="popover"]').popover();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" id="blob2" class="btn large primary" data-trigger="hover" rel="popover" data-html="true" data-content='<a href="https://whosebug.com/users/1321167/vijayp">
<img src="https://whosebug.com/users/flair/1321167.png" width="208" height="58" alt="profile for vijayP at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for vijayP at Stack Overflow, Q&amp;A for professional and enthusiast programmers">
</a>' style="margin-top: 100px">hover for popover</a>

注意：在将此类代码合并到您的网站页面时，请不要忘记根据您的个人资料修改 user flair <a> 标签。

如何在 div 悬停时预览我的 Stack Overflow 配置文件

How to preview my Stack Overflow profile in a div on hover

jquery

html

iframe

x-frame-options