Embebing instagram webpage inside an iframe

2020-05-21 06:48发布

站内问答 / JavaScript
724 3 4

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.

3条回答
一纸荒年 Trace。
2楼-- · 2020-05-21 06:52

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

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
3楼-- · 2020-05-21 06:57

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.

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
4楼-- · 2020-05-21 07:08

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)