在 iframe 中嵌入 instagram 网页

Posted

技术标签:

【中文标题】在 iframe 中嵌入 instagram 网页【英文标题】:Embedding instagram webpage inside an iframe 【发布时间】:2014-07-14 15:05:58 【问题描述】:

我收到此错误:

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

我想在我的网络中显示 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 -->

我正在使用此网页向其他网站展示,但我不知道为什么它在 instagram 上失败。

【问题讨论】:

你不能做这个客户端,你可以获取页面服务器端..或者做一些肮脏的 yql-hack 【参考方案1】:

是的,您可以使用这种格式显示 instagram 页面

http://instagram.com/p/qbq6fIJMVZ

...在 iframes 中只要添加后缀 /embed 就好了

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

JSFIDDLE

【讨论】:

你能显示投票页面而不是照片吗?我希望能够支持或反对。我无法显示该页面 @Biribu :我不确定我理解你的意思。什么投票页面?我的回答能解决你的问题吗?如果是,请meta.stackexchange.com/a/5235 您的回答嵌入了来自 instagram 的照片和点赞数,但我需要嵌入点赞按钮才能点赞照片。那可能吗?使用您的代码,我必须在 instagram 上按下“instagram”视图才能投票或发表评论。我想在我的应用程序中这样做 @Biribu 我认为使用当前 API 在 iframe 中是不可能的,您需要在 Instagram 中查看照片(并登录)才能喜欢它或发表评论。 有什么方法可以在我们的网站上显示整个 Instagram 页面,例如“instagram.com/jaybhalodi”我希望整个页面加载到我的网站中,我遇到同样的错误拒绝显示“instagram.com/jaybhalodi” ' 在一个框架中,因为它将 'X-Frame-Options' 设置为 'sameorigin'。【参考方案2】:

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

【讨论】:

好的,谢谢。然后我应该检查如何在 javascript 中打开 webapp 浏览器之外的浏览器。该死,这似乎太容易了! 是的,有可能。看我的回答。【参考方案3】:

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

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

如果你觉得困难或者你想要这里的纯代码,你所要做的就是使用下面的代码和你自己的 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>

【讨论】:

以上是关于在 iframe 中嵌入 instagram 网页的主要内容,如果未能解决你的问题,请参考以下文章

在 iframe 中隐藏嵌入网页的页脚

使用 iframe 或 Object 标签将网页嵌入另一个

使用 iframe 或 Object 标签将网页嵌入另一个

iframe框架嵌入一个网页,在微信里面打开不显示内容,一片空白,在其他浏览器都正常,紧急求助,在线等!

在 Flutter for Web 应用程序中嵌入网页作为 Widget(类似于 iframe)

无法通过 jQuery 访问 iFrame 的类的高度