Embebing instagram webpage inside an iframe

问题

I am getting this error:

Refused to display 'http://instagram.com/p/page/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

I want to show instagram page inside my web because it is a mobile app and I want to use my back buttons.

This is my webpage:

<body id="responsiveDemo">  
<div data-role="page" id="test" data-theme="g">
<div data-theme="g" data-role="header">
    <a href="javascript:history.back()" data-icon="back" data-iconpos="notext"></a>
    <h1>Instagram</h1>
</div>

<div data-role="content">

<iframe id="iframeInstagram" src="" name="IframeInstagram" style="width: 100%; height: 1000px; border: medium none;visibility: visible;"></iframe>

            <script>

            var query = location.search.substring(1);
            //console.log(query);
            var parameters = {};
            var keyValues = query.split(/&/);
            for (var i = 0; i < keyValues.length;i++) {
                var keyValuePairs = keyValues[i].split(/==/);
                var key = keyValuePairs[0];
                var value = keyValuePairs[1];
                parameters[key] = value;
            }



                /*+$(document).ready(function() {
                    //console.log(parameters['page']);
                    document.getElementById('iframeColaborador').src = parameters['colaborador'];


                });
                */
                //$(document).on("pageload", '#test', function() {
                $(document).on("pageshow", '#test', function() {
                //$(document).load(function() {
                    console.log(parameters['instagram']);
                    document.getElementById('iframeInstagram').src = parameters['instagram'];
                    //document.getElementById('iframeNews').src = 'http://www.unican.es';


                });


            </script>



</div> <!-- /content -->

I was using this webpage to show others webs but I don't know why it fails with instagram.

回答1:

YES, you can display instagram pages with this format

http://instagram.com/p/qbq6fIJMVZ

...inside iframes as long as you add the suffix /embed like

<iframe width="320" height="440" src="http://instagram.com/p/qbq6fIJMVZ/embed" frameborder="0"></iframe>

See JSFIDDLE

回答2:

You won't be able to because Instagram denies external websites from putting their website in a frame. This is why you got that error message about X-Frame-Options being set to SAMEORIGIN -- same origin means it will only allow Instagram to use the frame, but not others.

回答3:

First of all Instagram let you embed the shares you did. All you have to do is

 
1-open instagram from your web browser
2-click any share you have 
3-at right bottom there is hidden menu with shape of ... (3 dot) click it 
4-select second menu which is embed to website
5-click copy link from the next page  and use that code to use instagram embeded link at your page

also if you find it difficult or you want the pure code here is all you have to do use below code with your own url

<blockquote class="instagram-media" data-instgrm-version="7" >
<a href="https://www.instagram.com/p/BT8cmZRlkVJ/"></a> 
</blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

来源：https://stackoverflow.com/questions/24739663/embebing-instagram-webpage-inside-an-iframe

标签

javascript

jquery

html

iframe

instagram