【发布时间】：2021-08-15 01:55:33
【问题描述】：
我在博客中拥有自己的博客，并且我是内容提供商。我在我的博客文章中为我的某些下载链接使用了内容锁定代码。一切都很顺利，直到我偶然发现了这一点。在一篇文章中，有两个以上的下载链接，我尝试再次添加相同的脚本。该脚本实际上是一个订阅解锁脚本，观众需要订阅才能解锁链接。我在下面附上了我的代码。当我再次将相同的代码添加到我的帖子时出现问题，我的频道的 youtube 链接实际上应该在新标签中打开，而不是在新标签中打开，而它在同一个标签中打开！这不允许我的观众在帖子关闭和 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>【问题讨论】：
-
对我来说它在新窗口中打开很好jsfiddle.net/vanowm/5gvb7caL
-
嘿，我的意思是，如果我在帖子中只使用此内容锁定一次，它将在新标签页中打开。假设我在博客的另外两个地方添加了相同的内容储物柜。现在，当我单击第一个内容储物柜时，YouTube 订阅会在新的弹出标签中正确打开。但是当我点击我在同一篇文章中添加的第二个和第三个内容储物柜时，YouTube 订阅会在同一页面中打开，因此不会关闭该人正在查看的页面。因此他/她根本无法解锁内容。希望我已经清楚地解释了我的问题。
-
非常感谢！它就像一个魅力。虽然我不完全了解问题是什么以及您是如何解决的，但我只是知道有两个相同的 ID 发生冲突。无论如何，非常感谢！
标签： javascript html blogger