似乎负责渲染Instagram和Twitter块引用的脚本只运行一次。
当导航到另一个包含Twitter或Instagram块引用的页面时，嵌入的iframe被正确查看，但是当导航到同一页面时，块引用不会呈现！
这就是我包含相应脚本的方式：
twitterPosts = function (d, s, id) {
let js: any,
fjs = d.getElementsByTagName(s)[0],
p = 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-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");
ionViewWillEnter() {
...
this.instagramPosts;
this.twitterPosts;
...
}
ionViewWillLeave() {
this.removeScript();
}
removeScript() {
let fjs = document.getElementsByTagName('script')[0];
fjs.parentElement.removeChild(document.getElementById('instagram-wjs'));
}
在添加包含块引用的 HTML 内容后，我还尝试运行这些脚本：
this.htmlContent = this.domSanitizer.bypassSecurityTrustHtml(this.post.content);
this.instagramPosts;
this.twitterPosts;
我怎样才能让脚本始终渲染块引用？！
Twitter 和 Instagram 嵌入分别由函数twttr.widgets.load()和instgrm.Embeds.process()呈现，其中这些函数在负责嵌入 Twitter 和 Instagram 的脚本的"onload"事件上触发。
我注意到，在ionic中导航到同一页面时，页面的源代码不会重新呈现，因为在浏览器中检查可以清楚地看出。
我曾尝试在ionViewWillEnter()、ionViewDidEnter()和ngAfterViewInit()中调用(<any>window)twttr.widgets.load()和(<any>window)instgrm.Embeds.process()函数，但导致错误"无法读取未定义的属性小部件"！
终于，我找到了解决方案！
有人在 Angular 中提出了一个 Twitter 嵌入的解决方案，它在 ionic 中有效！ https://stackoverflow.com/a/43048814/10533962
解决方案是将Twitter小部件的实例保存到(<any>window)对象，以便能够再次调用属于它的函数。
我在 Instagram 嵌入上应用了相同的逻辑，它奏效了！
这是我的最终代码：
twitterRender() {
(<any>window).twttr = (function (d, s, id) {
let js: any, fjs = d.getElementsByTagName(s)[0],
t = (<any>window).twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function (f: any) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
if ((<any>window).twttr.ready())
(<any>window).twttr.widgets.load();
}
instagramRender() {
(<any>window).instagram = function (d, s, id) {
let js: any;
let fjs = d.getElementsByTagName(s)[0],
i = (<any>window).instagram || {};
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);
i._e = [];
i.ready = function (f: any) {
i._e.push(f);
};
return i;
}
}(document, "script", "instagram-wjs");
if ((<any>window).instagram.ready())
(<any>window).instgrm.Embeds.process();
}
ionViewDidEnter() {
instagramRender();
twitterRender();
}
但是当从 API 获取数据并动态注入 HTML 代码时，如下所示：
this.htmlContent = domSanitizer.bypassSecurityTrustHtml(this.postContent);
instagramRender();
twitterRender();
对我来说，即使在 HTML 赋值后调用函数时，Twitter 和 Instagram 嵌入也没有呈现！
这是一个同步问题，因为函数似乎在加载动态 HTML 内容之前触发！
我曾尝试在加载 HTML 内容的div 之后调用函数。<div (load)="render()" [innerHTML]="htmlContent"></div>但似乎div 在 Ionic 中没有"加载"事件！
因此，我尝试在填充HTML内容后等待200ms，然后调用函数，它就像魅力一样工作。
setTimeout(() => {
this.twitterRender();
this.instagramRender();
}, 200);
成功！
我在嵌入Instagram时遇到问题，在嵌入中显示消息"在Instagram上显示出版物"，但如果运行服务器不显示此消息