Shopify "mailto:" 标签问题答案

【问题标题】：Shopify "mailto:" tag issueShopify "mailto:" 标签问题
【发布时间】：2018-10-11 11:15:28
【问题描述】：

我在 shopify 商店中遇到外部链接问题。

我正在通过我的应用程序注入脚本，以显示带有锚标记的气泡，用于将用户重定向到给定的链接。但是shopify正在将锚标签更改为以下链接：-

 <a href="/cdn-cgi/l/email-protection#076e69616847736274732964686a"><span style="color:#999999;">??Click here </span></a>

此链接导致 404 错误和找不到页面。

这是我的js代码

if (typeof jQuery == 'undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
    headTag.appendChild(jqTag)
} else {
    var $ = jQuery.noConflict()
}
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = '//cdn.jsdelivr.net/emojione/1.5.2/lib/js/emojione.min.js';
headTag.appendChild(jqTag)

$(document).ready(function(){
    var shop_name = Shopify.shop;
    $.ajax({
        url:'https://deepak.com/client/ajax_response.php',
        type:'post',
        data:{store_name:shop_name},
        success:function(data){
            if(data != '0'){
                $('body').append(data);
            }
        },
        error:function(){
            console.log('Network error');
        }
    })
});

返回的响应是

<div id="bubbleChatBox"><a href="/cdn-cgi/l/email-protection#c5acaba3aa85b1a0b6b1eba6aaa8"><span style="color:#999999;">Click here </span></a>
</div><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

我还没有添加 email-decode.min.js，但它会自动添加到我的回复中。

链接应该像这样正确显示（期望的结果）：-

<a href="mailto:info@test.com"><span style="color:#999999;">Click here </span></a>

请帮帮我。

【问题讨论】：

我们需要你的代码
@Deepak Lakhara 可能是其他一些应用 js 会改变...我只是猜测
@delboy1978uk 请看我的代码。
这些代码看起来都与 <a> 标记的生成无关。
什么是https://deepak.com/client/ajax_response.php - 是指向某种shopify 功能的URL，还是您自己编写的？如果是后者，那么你在这个脚本中到底在做什么？

标签： javascript php shopify shopify-app

【解决方案1】：

我不使用 Shopify，所以很遗憾我无法对此进行测试，但似乎这是由服务器处理的。解决方法可能是执行以下操作：

在您的success: 函数中，在$('body').append(data); 之后添加以下内容：

document.getElementById('bubbleChatBox').childNodes[0].setAttribute("href", "mailto:info@test.com");

在服务器处理并被客户端接收后，它使用 Javascript 将所需的 HTML 加载到文档中。请让我知道它是否有效！

【讨论】：

感谢您的回复。链接正在由此创建：- prntscr.com/l4ty4r 我可以要求用户添加这样的内容。那么我可以应用什么其他解决方案。
对不起，我不能要求客户使用 div 及以上模式。
@Deepak Lakhara：在您发布代码后，我意识到您无法添加该元素。试试我编辑的解决方案，如果可行，请告诉我。

【解决方案2】：

我不知道如何解决 Shopify 的问题。但是一个技巧使我的代码正常工作。

我只是将“mailto”更改为“@mailto”，同时保存在数据库中并在 shopify 商店注入脚本后。我将“@mailto”更改为“mailto”，它起作用了。

我使用以下代码使其工作。

<script>
    $("#bubbleChatBox a").each(function() {
        var text = $(this).attr("href");
        $(this).attr("href",text.replace("@mailto", "mailto"));
    });
</script>

【讨论】：

【解决方案3】：

看起来这家商店在 Cloudflare 背后并使用他们的 Email Address Obfuscation 功能。这可以在 Cloudflare 控制面板中禁用，或者根据具体情况使用这些标签：

<!--email_off--><a href="mailto:foo@bar.test"></a><!--/email_off-->

【讨论】：