Javascript 在爱奥尼亚3页列出嵌入Instagram的帖子

我想在我的Ionic 3应用程序中列出嵌入Instagram的帖子。我尝试手动执行此操作： 1.转到我桌面上的Instagram，选择一篇公开帖子，点击嵌入选项上的三个点。我复制了链接并将其粘贴到我的页面中：

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/Bmoikg2ABAt/?utm_source=ig_embed" data-instgrm-version="9" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/Bmoikg2ABAt/?utm_source=ig_embed" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">And lastly, my actual #1 @courtneyjbarry you are an incredible woman. The way you handle life’s most confusing moments is indescribable and graceful. You are moved by the littlest stories to the most heartbreaking ones, you will give someone your perfume if they say you smell nice, you are freaking hilarious and always stand firm in your faith, a loving sister, an amazing friend and a beautiful daughter. You are the definition of FEARFULLY and WONDERFULLY made baby! #1</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/selenagomez/?utm_source=ig_embed" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Selena Gomez</a> (@selenagomez) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-08-18T20:20:56+00:00">Aug 18, 2018 at 1:20pm PDT</time></p></div></blockquote> **<script async defer src="//www.instagram.com/embed.js"></script>**

8月18日（@selenagomez）共享的帖子，2018年太平洋标准时间下午1:20****

我还将脚本的src从

---

加载内容时尝试调用此函数：

instgrm.Embeds.process()

编辑：

import { Injectable } from '@angular/core';

@Injectable()
export class InstagramProvider {

    constructor() {
        this.insertInstagramScript();
    }

    loadEmbeds() {
        let win = <any>window;
        if (win.instgrm && win.instgrm.Embeds) {
        win.instgrm.Embeds.process();
        }
    }

    private insertInstagramScript() {
        var script = document.createElement('script');
        script.setAttribute('src', 'http://platform.instagram.com/en_US/embeds.js');
        document.body.appendChild(script);
    }
}

从'@angular/core'导入{Injectable}；
@可注射（）
导出类InstagramProvider{
构造函数（）{
这个.insertInstagramScript（）；
}
loadEmbeds（）{
让胜利=窗口；
if（win.instgrm&&win.instgrm.embeddes）{
win.instgrm.Embeds.process（）；
}
}
私有insertInstagramScript（）{
var script=document.createElement（'script'）；
script.setAttribute（'src'，'http://platform.instagram.com/en_US/embeds.js');
document.body.appendChild（脚本）；
}
}

---

这是适合我的解决方案。

您可以创建一个简单的提供程序来插入instagram库并加载帖子。我用一个样本编辑我的答案，我也有同样的问题。“你能找到解决办法吗？”大谷发布了答案。它对我有用。请尝试并通知我。尝试复制代码，但从！开始的Instagrampost（）上显示错误。你在用打字脚本吗？不过，我对这个功能不太熟悉。这是针对手机应用程序（本机？）还是使用浏览器因为我为爱奥尼亚服务。但是，如果我在实际设备或模拟器/仿真器上构建它，它就不起作用了。它是ionic应用程序的typescript。你能告诉我它引发了什么问题/错误吗？void类型的表达式无法测试其穿透性。那么，如果我删除了！。函数（d）上需要标识符。然后逗号oeprator的左侧未使用，并且没有副作用。（文档，“sciprt”我已经测试过修改函数，但知道让它工作的运气如何。

   removeScript(){
        let fjs = document.getElementsByTagName('script')[0]

   fjs.parentNode.removeChild(document.getElementById('instagram-wjs'));

  }
  instagramPosts(){
    ! function(d, s, id){
      let js: any;
      let fjs = d.getElementsByTagName(s)[0];

      if (! d.getElementById(id)) {
        js = d.createElement(s);
        js.setAttribute("onLoad","window.instgrm.Embeds.process()");
        js.id = id;
        js.src = "https://platform.instagram.com/en_US/embeds.js";

        fjs.parentNode.insertBefore(js,fjs);
      }
    } (document, "script", "instagram-wjs");
  }

  ionViewWillLoad() {
    this.instagramPosts();
  }

ionViewWillLeave(){ this.removeScript(); }