Search code examples
jqueryhtmliframex-frame-options

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

Here I have a Bootstrap popover where I put a iframe to show my SO profile as a preview but HTTP response header is not allowing to render it on my local machine but its working fine here. Any suggestions would be helpful

enter image description here

$(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>

Solution

  • Opening a SO page within <iframe> on a page hosted within any other third party domain other than SO is not possible I guess because stack overflow sets X-Frame-Options:SAMEORIGIN as a response header. It means that these SO urls can only be opened in an iframe on a web page hosted within SO domains only. So to simply answer your question; it is impossible to have an iframe in your own website with src pointing to your profile page.

    Instead of this you can go with User Flair

    For your popover code; you may try like this which will show user flair within 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>

    Note: Please don't forget to modify user flair <a> tag as per your profile while incorporating such code to your website page.