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

时间:2017-05-22 07:05:20

标签: angularjs facebook typescript ionic-framework deep-linking

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

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

我家中的以下代码似乎正在运作

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

我可以通过浏览器开发控制台/元素验证它。

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

似乎看到默认

http://example.com/someurl.jpg

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

也许,我的理解是有缺陷的,有更好的方法来做到这一点。 谢谢。

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

Note2:这里的最终目标是分享一个社交媒体(网络或应用)的链接,比如facebook,像viber / skype这样的信使......并让它有意义图像,标题,描述以通过浏览器驱动访问返回网站,或者如果用户点击链接的应用程序位于移动设备上,并且我的设备上安装了我的应用程序版本的网站。

注3:如果您决定将我指向离子深度链接,请提供与上述相符的代码,因为我无法理解如何申请我的案例。

1 个答案:

答案 0 :(得分:0)

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

当站点或应用程序仅访问您的站点/链接以提取(即报废,解析html)信息(例如开放图元提供的信息)时,通常会忽略客户端脚本(即JavaScript)标签(og:title,og:description og:image ...)。