在iframe中嵌入Instagram网页

Bir*_*ibu 3 html javascript iframe jquery instagram

我收到此错误:

Refused to display 'http://instagram.com/p/page/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Run Code Online (Sandbox Code Playgroud)

我想在我的网页中显示Instagram页面,因为它是一个移动应用程序,我想使用我的后退按钮.

这是我的网页:

<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 -->
Run Code Online (Sandbox Code Playgroud)

我正在使用这个网页来展示其他网站,但我不知道为什么它失败了.

JFK*_*JFK 17

是的,您可以使用此格式显示Instagram页面

http://instagram.com/p/qbq6fIJMVZ
Run Code Online (Sandbox Code Playgroud)

...在iframe中,只要你添加后缀/embed就好

<iframe width="320" height="440" src="http://instagram.com/p/qbq6fIJMVZ/embed" frameborder="0"></iframe>
Run Code Online (Sandbox Code Playgroud)

请参阅JSFIDDLE

  • 你的答案嵌入了照片和Instagram的喜欢的数量,但我需要嵌入类似的按钮,以便能够像一张照片.那可能吗?使用您的代码,我必须按Instagram上的"instagram"视图进行投票或发表评论.我想在我的应用程序中做到这一点 (2认同)

jos*_*osh 5

您将无法这样做,因为 Instagram 拒绝外部网站将其网站放入框架中。X-Frame-Options这就是为什么您会收到有关设置为“同源”的错误消息,SAMEORIGIN这意味着它只允许 Instagram 使用该框架,而不允许其他框架。


小智 5

首先,Instagram 允许您嵌入您所做的分享。你所要做的就是

 
1-从网络浏览器打开 Instagram
2 单击您拥有的任何共享
3-右下角有一个隐藏菜单,形状为...(3点)单击它
4-选择嵌入到网站的第二个菜单
5 单击下一页的复制链接,然后使用该代码在您的页面上使用 Instagram 嵌入链接

另外,如果您发现它很困难或者您想要这里的纯代码,那么您所要做的就是使用下面的代码和您自己的网址

<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>
Run Code Online (Sandbox Code Playgroud)