如何在一篇博客文章中添加两个html脚本?

Question

我在博客上有自己的博客，我是一个内容提供者。我在我的博客文章中为我的某些下载链接使用内容锁定代码。一切都很顺利，直到我偶然发现了这个。在一个帖子中有两个以上的下载链接，我尝试再次添加相同的脚本。该脚本实际上是一个订阅解锁脚本，观看者需要订阅才能解锁链接。我在下面附上了我的代码。问题出现时，我再次添加相同的代码到我的帖子，我的频道的youtube链接，实际上应该在一个新的选项卡中打开，而不是在一个新的选项卡中打开，而它在同一个选项卡中打开!这不允许我的观众在帖子关闭和youtube打开时解锁内容。同样，这个问题不会发生在第一个内容锁上，而只会发生在第二个内容锁上，并且还会继续。请帮我解决这个问题。此外，我不是任何好的编码员或有任何关于编码的知识。所以请简化答案。下面我附上了我的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

问题是locker使用id和id必须是唯一的，但是当您创建locker的多个副本时，这些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')指定了窗口名称，但如果你传递'_blank'给它，它会告诉窗口在新选项卡中打开。