自定义右键单击锚标记以在新选项卡中打开 link
Custom right click for anchor tag to open link in new tab
我有以下代码可以打开 <a>
元素的特定右键菜单。
在任何 link 上,我右键单击并单击以在新选项卡中打开,它只会打开第一个 link。
java-script 中有一些与计数器有关的东西,我无法这样做。
我想打开每个 link 的右键单击,这样它将通过从 <a>
的 href
中获取 link 在新选项卡中打开 link元素.
如果有人有其他更好的脚本,请与我分享。
谢谢。
Link 从数据库获取
$i =1;
$get_newbooks = mysqli_query($dba, "select * from mynewbooks
where status = 1
");
while ($thisbook = mysqli_fetch_array($get_newbooks)) {
?>
<a href="<?php echo $thisbook['link']; ?>" id="openinnewtabt<?php echo $i++; ?>">
<?php echo $thisbook['name']; ?>
</a>
}
标签的右键菜单
<div class="hide" id="rmenu">
<ul>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
<li>
<button style="text-align: center; color: black; width: 150px;"
class="opennewtabt item copy-button">
Open Link In New Tab
</button>
</li>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
</ul>
</div>
CSS
.show {
z-index: 10000000000000;
position: absolute;
background-color: #C0C0C0;
border: 1px solid grey;
padding: 2px;
display: block;
margin: 0;
list-style-type: none;
list-style: none;
}
.hide {
display: none;
}
.show li {
list-style: none;
}
.show a {
border: 0 !important;
text-decoration: none;
}
.show a:hover {
text-decoration: underline !important;
}
Javascript
$(document).ready(function() {
$('body').on('contextmenu', 'a', function() {
var counter = 1;
$('.opennewtabt').on('click', function() {
var link = $('#openinnewtabt'+counter).attr('href');
window.open(link, '_blank').focus();
return false;
});
document.getElementById("rmenu").className = "show";
document.getElementById("rmenu").style.top = mouseY(event) + 'px';
document.getElementById("rmenu").style.left = mouseX(event) + 'px';
window.event.returnValue = false;
});
});
// this is from another SO post...
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
function mouseX(evt) {
if (evt.pageX) {
return evt.pageX;
} else if (evt.clientX) {
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
} else {
return null;
}
}
function mouseY(evt) {
if (evt.pageY) {
return evt.pageY;
} else if (evt.clientY) {
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
} else {
return null;
}
}
您在 contextmenu
处理程序中设置了 click
处理程序...
相反,您应该将它放在外面并将 href
传递给上下文菜单中的按钮。
这可以使用 .data().
来完成
所以您不需要任何 id
链接...也不需要 counter
.
$(document).ready(function() {
// Context menu open
$("body").on("contextmenu", "a", function() {
// pass the href to the context menu button
$(".opennewtabt").data("href", this.href)
$(".opennewtabt").text($(this).text() + " in a new window")
// document.getElementById("rmenu").className = "show";
// document.getElementById("rmenu").style.top = mouseY(event) + "px";
// document.getElementById("rmenu").style.left = mouseX(event) + "px";
// With jQuery, the 3 lines above can be writen like this
$("#rmenu").removeClass("hide").addClass("show").css({"top":mouseY(event) + "px", "left":mouseX(event) + "px"})
window.event.returnValue = false;
});
// Context menu click handler
$(".opennewtabt").on("click", function(e) {
var link = $(e.target).data("href")
window.open(link, "_blank").focus();
return false;
});
});
// this is from another SO post...
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
function mouseX(evt) {
if (evt.pageX) {
return evt.pageX;
} else if (evt.clientX) {
return (
evt.clientX +
(document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft)
);
} else {
return null;
}
}
function mouseY(evt) {
if (evt.pageY) {
return evt.pageY;
} else if (evt.clientY) {
return (
evt.clientY +
(document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop)
);
} else {
return null;
}
}
.show {
z-index: 10000000000000;
position: absolute;
background-color: #c0c0c0;
border: 1px solid grey;
padding: 2px;
display: block;
margin: 0;
list-style-type: none;
list-style: none;
}
.hide {
display: none;
}
.show li {
list-style: none;
}
.show a {
border: 0 !important;
text-decoration: none;
}
.show a:hover {
text-decoration: underline !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">
test link 1
</a><br>
<a href="http://test.com">
test link2
</a><br>
<a href="http://hello.com">
test link3
</a><br>
<div class="hide" id="rmenu">
<ul>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
<li>
<button style="text-align: center; color: black; width: 150px;" class="opennewtabt item copy-button">
Open Link In New Tab
</button>
</li>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
</ul>
</div>
由于 SO 片段中不允许使用 window.open
,请查看 CodePen
我有以下代码可以打开 <a>
元素的特定右键菜单。
在任何 link 上,我右键单击并单击以在新选项卡中打开,它只会打开第一个 link。 java-script 中有一些与计数器有关的东西,我无法这样做。
我想打开每个 link 的右键单击,这样它将通过从 <a>
的 href
中获取 link 在新选项卡中打开 link元素.
如果有人有其他更好的脚本,请与我分享。
谢谢。
Link 从数据库获取
$i =1;
$get_newbooks = mysqli_query($dba, "select * from mynewbooks
where status = 1
");
while ($thisbook = mysqli_fetch_array($get_newbooks)) {
?>
<a href="<?php echo $thisbook['link']; ?>" id="openinnewtabt<?php echo $i++; ?>">
<?php echo $thisbook['name']; ?>
</a>
}
标签的右键菜单
<div class="hide" id="rmenu">
<ul>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
<li>
<button style="text-align: center; color: black; width: 150px;"
class="opennewtabt item copy-button">
Open Link In New Tab
</button>
</li>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
</ul>
</div>
CSS
.show {
z-index: 10000000000000;
position: absolute;
background-color: #C0C0C0;
border: 1px solid grey;
padding: 2px;
display: block;
margin: 0;
list-style-type: none;
list-style: none;
}
.hide {
display: none;
}
.show li {
list-style: none;
}
.show a {
border: 0 !important;
text-decoration: none;
}
.show a:hover {
text-decoration: underline !important;
}
Javascript
$(document).ready(function() {
$('body').on('contextmenu', 'a', function() {
var counter = 1;
$('.opennewtabt').on('click', function() {
var link = $('#openinnewtabt'+counter).attr('href');
window.open(link, '_blank').focus();
return false;
});
document.getElementById("rmenu").className = "show";
document.getElementById("rmenu").style.top = mouseY(event) + 'px';
document.getElementById("rmenu").style.left = mouseX(event) + 'px';
window.event.returnValue = false;
});
});
// this is from another SO post...
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
function mouseX(evt) {
if (evt.pageX) {
return evt.pageX;
} else if (evt.clientX) {
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
} else {
return null;
}
}
function mouseY(evt) {
if (evt.pageY) {
return evt.pageY;
} else if (evt.clientY) {
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
} else {
return null;
}
}
您在 contextmenu
处理程序中设置了 click
处理程序...
相反,您应该将它放在外面并将 href
传递给上下文菜单中的按钮。
这可以使用 .data().
所以您不需要任何 id
链接...也不需要 counter
.
$(document).ready(function() {
// Context menu open
$("body").on("contextmenu", "a", function() {
// pass the href to the context menu button
$(".opennewtabt").data("href", this.href)
$(".opennewtabt").text($(this).text() + " in a new window")
// document.getElementById("rmenu").className = "show";
// document.getElementById("rmenu").style.top = mouseY(event) + "px";
// document.getElementById("rmenu").style.left = mouseX(event) + "px";
// With jQuery, the 3 lines above can be writen like this
$("#rmenu").removeClass("hide").addClass("show").css({"top":mouseY(event) + "px", "left":mouseX(event) + "px"})
window.event.returnValue = false;
});
// Context menu click handler
$(".opennewtabt").on("click", function(e) {
var link = $(e.target).data("href")
window.open(link, "_blank").focus();
return false;
});
});
// this is from another SO post...
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
function mouseX(evt) {
if (evt.pageX) {
return evt.pageX;
} else if (evt.clientX) {
return (
evt.clientX +
(document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft)
);
} else {
return null;
}
}
function mouseY(evt) {
if (evt.pageY) {
return evt.pageY;
} else if (evt.clientY) {
return (
evt.clientY +
(document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop)
);
} else {
return null;
}
}
.show {
z-index: 10000000000000;
position: absolute;
background-color: #c0c0c0;
border: 1px solid grey;
padding: 2px;
display: block;
margin: 0;
list-style-type: none;
list-style: none;
}
.hide {
display: none;
}
.show li {
list-style: none;
}
.show a {
border: 0 !important;
text-decoration: none;
}
.show a:hover {
text-decoration: underline !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">
test link 1
</a><br>
<a href="http://test.com">
test link2
</a><br>
<a href="http://hello.com">
test link3
</a><br>
<div class="hide" id="rmenu">
<ul>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
<li>
<button style="text-align: center; color: black; width: 150px;" class="opennewtabt item copy-button">
Open Link In New Tab
</button>
</li>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
</ul>
</div>
由于 SO 片段中不允许使用 window.open
,请查看 CodePen