如何在 js 中转换 url 以在 Facebook 共享按钮中使用？

Question

首先，我有动态生成的页面，它的网址是

https://example.com/main?id=First%20Theory&id2=A&id3=87710

当我转到Facebook 开发人员工具页面并生成共享按钮的链接时，它会生成以下内容：

https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fmain%3Fid%3DFirst%2BTheory%26id2%3DA%26id3%3D87710&src=sdkpreparse

我在 facebook 分享按钮中使用此链接，它运行良好且分享良好。

然后我需要为此链接使用变量，因为我的页面是动态生成的。

所以我在js中调用url并将链接像变量一样放置：

<a class="fb-share-button"

     [href]="urlToCopy"

     data-layout="button_count" data-size="small">

     <a target="_blank"

       [href]="'https://www.facebook.com/sharer/sharer.php?u=' + urlToCopy + ';src=sdkpreparse'"

       class="fb-xfbml-parse-ignore">{{urlToCopy}}</a>

</a>    

哪里 urlToCopy

https://example.com/main?id=First%20Theory&id2=A&id3=87710

然后，当我使用此共享按钮进行共享时，facebook 模态窗口会以奇怪的 url 打开

https://www.facebook.com/sharer/sharer.php?u=https://example.com/main?id=First%20Theory&id2=A&id3=87710;src=sdkpreparse

和共享不起作用。

我该如何解决这个问题以及我应该对 js 进行什么 url 转换才能在 facebook 分享按钮中使用它？

Answer 1

您在这里所做的是将一个 URL 作为查询字符串参数的值引入另一个 URL - 因此第一个 URL 需要正确进行 URL 编码。申请encodeURIComponent它。