Question

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

<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>**

我也从更改了脚本的src

<script async defer src="//www.instagram.com/embed.js"></script>

到

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

我还在底部的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帖子一样显示。

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

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

这是对我有用的解决方案。

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

2 个答案: