如何在页面返回给请求者之前修改 index.html 中的 HTMLElement

How to modify HTMLElement in index.html before page gets returned to requestor

根据我处理的自定义 URL 参数,我正在尝试动态修改我在 index.html 中标识的元标记,如下所示:

<meta name="og:image" content="http://example.com/someurl.jpg" id="ogImage"/>

我的 home.ts 中的以下代码似乎有效

document.getElementById('ogImage').setAttribute("content", Media.ImageURL) ;

我可以通过浏览器开发验证它 console/elements。

但是,当我通过他们的 ojbect 图形调试器从 facebook 查看时 https://developers.facebook.com/tools/debug/og/object/

好像看到默认的

http://example.com/someurl.jpg

好像 index.html 在我的 home.ts 有机会进行更新之前就已经发货了。

也许是我的理解有问题,有更好的办法。 谢谢。

注意 1: 最初,我想我必须在 index.html 和我的一项服务之间进行一些 angular 绑定,但我找不到任何示例代码,我最接近的是这个 post How can I update meta tags in AngularJS? 但是我不知道如何将它应用到我的 ionic2/3 代码中,所以我选择了 document.get 方法。

注2:这里的最终目标是将link分享到像facebook这样的社交媒体(网络或应用程序),像viber/skype这样的信使等...并解析为有意义的图像、标题、描述以通过浏览器或应用程序将访问驱动回网站(如果用户点击 link 是在移动设备上,我的应用程序版本为他设备上安装的网站。

注意 3: 如果你决定让我使用 ionic deeplinking 请提供上面匹配的代码,因为我无法理解如何应用到我的案例中.

如果您尝试在您的页面中实施 动态 开放图元标记值,您将需要一种服务器端脚本语言,例如 php。这样的脚本将 运行 在服务器上,根据需要更新页面,然后将页面提供给请求站点或应用程序。

客户端脚本(即 JavaScript)通常会在网站或应用访问您的 site/link 以提取(也称为抓取、解析 html 目的时被忽略) 信息,例如由 open graph meta 标签提供的信息 (og:title, og:description og:image...).