如何在单篇Blogger博文中添加多个HTML订阅解锁脚本并解决跳转异常

问题根因 #

原有代码使用了唯一ID属性绑定逻辑，HTML规范要求同一页面内同一个ID只能出现一次。你重复添加代码后，第二个及之后的锁定器ID和第一个重复，JS点击事件无法绑定到后续的锁定器上，点击后就跳过了弹窗逻辑直接在当前页跳转。

解决方法（零基础可操作） #

步骤1：先把公共样式放到博文最开头，仅需添加1次，后续新增锁定器不用重复加

<style>
@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
html, body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}
/* 把原来的ID选择器改成类选择器，适配多个锁定器 */
.sociallocker {
    background-color: #EEEEEE;
    text-align: center;
    position: relative;
    max-width: 500px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius:10px;
    margin: 10px 0;
}
.sociallocker-overlay {
    background-color: rgba(0,0,0,0.6);
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    transition: all 0.2s ease;
}
.sociallocker-overlay i {
    margin-right: 10px;
}
.sociallocker:hover .sociallocker-overlay {
    top: -100%;
    transition: all 0.2s linear;
}
.sociallocker:hover .sociallocker-content {
    top: 100%;
    transition: all 0.2s linear;
}
.sociallocker-content a {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #777777;
    color: #f9f9f9;
    border-radius: 4px;
    font-weight: bold;
}
.sociallocker-overlay,
.sociallocker-content,
.sociallocker-links{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
}
.sociallocker-content {
    background-color: #ccc;
    transition: all 0.2s ease;
}
.social-1 {
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
    width: 498px;
    height: 118px;
    overflow: hidden;
    margin-right: 0px;
}
.social-1 i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.social-1:hover i {
    background-color: rgba(0,0,0,0.1);
    transform: scale(1.2);
    transition: all 0.2s;
}
.fb { background-color: #FF0000; }
</style>

步骤2：每次新增一个锁定器，就添加一段下面的代码，仅需要把代码里所有的{序号}改成依次递增的数字即可，比如第一个锁定器全改成1，第二个全改成2，以此类推

<!-- 把所有{序号}替换成数字，比如第一个锁替换成1，第二个替换成2 -->
<div class="sociallocker" id="sociallocker{序号}">
    <div class="sociallocker-links" id="sociallocker-links{序号}">
        <a class="social-1 fb" href="你的YouTube频道订阅链接">
            <i class="fab fa-youtube fa-3x"></i>
        </a>
    </div>
    <div class="sociallocker-content" id="sociallocker-content{序号}">
        <a href="替换成当前锁对应的下载链接" rel="nofollow" target="_blank">
            <i class="fas fa-download"></i> Download
        </a>
    </div>
    <div class="sociallocker-overlay" id="sociallocker-overlay{序号}">
        <i class="fas fa-lock"></i>SUBSCRIBE TO UNLOCK
    </div>
</div>
<script>
(function() {
    var sl = document.querySelector("#sociallocker{序号}");
    var slc = document.querySelector("#sociallocker-content{序号}");
    if (!sl) return;
    var old_slc_html = slc.innerHTML;
    slc.innerHTML = slc.innerHTML.replace(/(href=")(.*)(\")/g, "href=\"#\"");
    sl.querySelectorAll(".sociallocker-links a").forEach(function(ele) {
        ele.onclick = function(e) {
            var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
            var check_window_close = setInterval(function() { 
                if (web_window.closed) {
                    clearInterval(check_window_close);
                    slc.innerHTML = old_slc_html;
                    document.querySelector("#sociallocker-links{序号}").style.display = "none";
                    document.querySelector("#sociallocker-overlay{序号}").style.display = "none"; 
                    document.querySelector("#sociallocker-content{序号}").style.top = "0";
                }
            }, 1000);
            e.preventDefault();
        };
    });
})();
</script>

操作示例 #

• 第一个锁定器：把代码里所有{序号}替换成1，下载链接填第一个资源的地址
• 第二个锁定器：把代码里所有{序号}替换成2，下载链接填第二个资源的地址
• 后续新增依次类推即可，所有锁定器都能正常弹出新窗口，不会覆盖当前博文页

内容的提问来源于stack exchange，提问作者Knight Photoshop