如何在单个博客 post 中添加两个 html 脚本？

Question

我在 blogger 中有自己的博客，我是内容提供者。我在我的博主 posts 中为我的某些下载 links 使用内容锁定代码。一切都进行得很顺利，直到我偶然发现了这个。在一个 post 中有两个以上的下载 link，我尝试再次添加相同的脚本。该脚本实际上是一个订阅解锁脚本，观众需要订阅才能解锁link。我在下面附上了我的代码。当我再次将相同的代码添加到我的 post 时，问题就出现了，我的频道的 youtube link 实际上应该在新标签中打开，但不会在新标签中打开，而是在同一个标签中打开标签！这不允许我的观众在 post 关闭和 youtube 打开时解锁内容。此外，第一个 yt 内容储物柜不会出现此问题，而只会从第二个内容储物柜出现并继续存在。请帮我解决这个问题。此外，我不是任何优秀的编码员或对编码有任何了解。所以请简化答案。下面我附上了我的 YouTube 内容储物柜代码。

<meta charset="utf-8"></meta>
        <style>
        @import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
        html, body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    }
        #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;
        }
        #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>
        <div id="sociallocker">
            <div id="sociallocker-links">
                <a class="social-1 fb" href="https://www.youtube.com/channel/UCqUX2UrWUz778zSFxPtVRyw?sub_confirmation=1"><i class="fab fa-youtube fa-3x"></i></a>
            </div>
            <div id="sociallocker-content">
                <a href="DOWNLOAD LINK HERE" rel="nofollow" target="_blank"><i class="fas fa-download"></i> Download</a>
            </div>
            <div 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>

Answer 1

问题是储物柜使用 id 并且 id 必须是唯一的，但是当您创建储物柜的多个副本时，这些 id 是冲突的。因此，储物柜的 javascript 部分仅在第一个储物柜上设置事件侦听器。

要解决这个问题，您需要将所有 id 和对它的引用转换为 css 类，而不是对所有使用单个 javascript：

https://jsfiddle.net/vanowm/5gvb7caL/

<meta charset="utf-8"></meta>
        <style>
        @import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
        html, body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    }
        .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;
        }
        .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>
<!-- first locker !-->
        <div class="sociallocker">
            <div class="sociallocker-links">
                <a class="social-1 fb" href="https://www.youtube.com/channel/UCqUX2UrWUz778zSFxPtVRyw?sub_confirmation=1"><i class="fab fa-youtube fa-3x"></i></a>
            </div>
            <div class="sociallocker-content">
                <a href="DOWNLOAD LINK HERE" rel="nofollow" target="_blank"><i class="fas fa-download"></i> Download</a>
            </div>
            <div class="sociallocker-overlay"><i class="fas fa-lock"></i>SUBSCRIBE TO UNLOCK</div>
        </div>

<!-- second locker !-->
        <div class="sociallocker">
            <div class="sociallocker-links">
                <a class="social-1 fb" href="https://www.youtube.com/channel/UCqUX2UrWUz778zSFxPtVRyw?sub_confirmation=1"><i class="fab fa-youtube fa-3x"></i></a>
            </div>
            <div class="sociallocker-content">
                <a href="DOWNLOAD LINK HERE" rel="nofollow" target="_blank"><i class="fas fa-download"></i> Download</a>
            </div>
            <div class="sociallocker-overlay"><i class="fas fa-lock"></i>SUBSCRIBE TO UNLOCK</div>
        </div>

<!-- third locker !-->
        <div class="sociallocker">
            <div class="sociallocker-links">
                <a class="social-1 fb" href="https://www.youtube.com/channel/UCqUX2UrWUz778zSFxPtVRyw?sub_confirmation=1"><i class="fab fa-youtube fa-3x"></i></a>
            </div>
            <div class="sociallocker-content">
                <a href="DOWNLOAD LINK HERE" rel="nofollow" target="_blank"><i class="fas fa-download"></i> Download</a>
            </div>
            <div class="sociallocker-overlay"><i class="fas fa-lock"></i>SUBSCRIBE TO UNLOCK</div>
        </div>
<!-- end locker !-->

        <script>
        (function() {
            var sls = document.querySelectorAll(".sociallocker");
            sls.forEach(sl =>
            {
              var slc = sl.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;
                              sl.querySelector(".sociallocker-links").style.display = "none";
                              sl.querySelector(".sociallocker-overlay").style.display = "none"; 
                              sl.querySelector(".sociallocker-content").style.top = "0";
                          }
                      }, 1000);
                      e.preventDefault();
                  };
              });
            });
        })();
        </script>

Answer 2

我不确定我是否理解您的意思，但我的理解是您说它在同一个选项卡中打开并且您希望它在不同的选项卡中打开。 window.open(this.href, 'Share Link'... 必须是 window.open(this.href, '_blank'...，否则会在同一个标签中打开。该函数的第二个参数（'Share Link' 或 '_blank'）指定 window 名称，但如果您将 '_blank' 传递给它，它会告诉 window 在新选项卡中打开。

如何在单个博客 post 中添加两个 html 脚本？

How to add two html scripts in a single blogger post?

html

javascript

blogger