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

Question

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

$(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://stackoverflow.com/users/5336321/hitesh-misro"></iframe>' style="margin-top: 100px">hover for popover</a>

Answer 1

在除 SO 之外的任何其他第三方域中托管的页面上的 <iframe> 内打开 SO 页面是不可能的，因为堆栈溢出将 X-Frame-Options:SAMEORIGIN 设置为响应标头。这意味着这些 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://stackoverflow.com/users/1321167/vijayp">
<img src="https://stackoverflow.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>

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