在 Ionic 3 页面上列出嵌入的 Instagram 帖子答案

【问题标题】：List embedded Instagram posts on Ionic 3 page在 Ionic 3 页面上列出嵌入的 Instagram 帖子
【发布时间】：2019-02-08 08:25:53
【问题描述】：

我想在我的 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>**

另外我将脚本的源代码从

&lt;script async defer src="//www.instagram.com/embed.js"&gt;&lt;/script&gt;

到

&lt;script async defer src="http://www.instagram.com/embed.js"&gt;&lt;/script&gt;

我还在底部的 index.html 中插入了脚本代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">
  <link href="assets/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

    <!-- Instagram -->
    <!-- <script async defer src="http://platform.instagram.com/en_US/embeds.js"></script> -->

    <!-- The polyfills js is generated during the build process -->
    <script src="build/polyfills.js"></script>

    <!-- The vendor js is generated during the build process
      It contains all of the dependencies in node_modules -->
      <script src="build/vendor.js"></script>

      <!-- The main bundle js is generated during the build process -->
      <script src="build/main.js"></script>

      <script async defer src="http://www.instagram.com/embed.js"></script>
</body>
</html>

但问题是帖子没有显示，我只能看到：

See Here

我的问题是我如何才能实际显示帖子而不是灰色 Instagram 徽标我需要像普通 Instagram 帖子一样显示图片/视频。

【问题讨论】：

我也有同样的问题。你找到解决办法了吗？
@otakuProgrammer 我发布了答案。这个对我有用。试试看，让我知道。

标签： javascript html ionic-framework ionic3 instagram-api

【解决方案1】：

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

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);
    }
}

【讨论】：

您可以创建一个简单的提供程序来插入 instagram 库并加载帖子。我用示例编辑我的答案

【解决方案2】：

   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(); }

这是适合我的解决方案。

【讨论】：

尝试复制代码，但它在 instagramPosts() 上显示错误，从 ! .你在使用打字稿吗？不过我不熟悉这个功能。
这是用于移动应用程序（本机？）还是使用浏览器。因为我的适用于离子服务。但如果我在实际设备或模拟器/模拟器上构建它，它就不起作用。
这是离子应用的打字稿。你能告诉它抛出了什么问题/错误吗？
无法测试 void 类型的表达式的真实性。然后，如果我删除！。函数上预期的标识符（d 然后逗号操作符的左侧未使用并且没有副作用。（文档，“sciprt”我已经测试过修改函数但要知道让它工作的运气。