[英]How to make a link open multiple pages when clicked
I have two (or more) links.我有两个(或更多)链接。 For example: http://google.com and http://yahoo.com .
例如: http://google.com和http://yahoo.Z4D236D9A2D102C5FE6AD1C50DADA 。
How can I make them both open when I click on a single link?当我单击一个链接时,如何使它们都打开?
For example, a link entitled "click here" which, when clicked, will open two different blank windows.例如,标题为“单击此处”的链接在单击时会打开两个不同的空白 windows。
HTML: HTML:
<a href="#" class="yourlink">Click Here</a>
JS: JS:
$('a.yourlink').click(function(e) {
e.preventDefault();
window.open('http://yoururl1.com');
window.open('http://yoururl2.com');
});
window.open
also can take additional parameters. window.open
也可以带附加参数。 See them here: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml在这里看到它们: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
You should also know that window.open is sometimes blocked by popup blockers and/or ad-filters.您还应该知道 window.open 有时会被弹出窗口阻止程序和/或广告过滤器阻止。
Addition from Paul below: This approach also places a dependency on JavaScript being enabled.以下来自 Paul 的补充:此方法还依赖于启用 JavaScript。 Not typically a good idea, but sometimes necessary.
通常不是一个好主意,但有时是必要的。
I did it in a simple way:我以一种简单的方式做到了:
<a href="http://virtual-doctor.net" onclick="window.open('http://runningrss.com');
return true;">multiopen</a>
It'll open runningrss in a new window and virtual-doctor in same window.它将在新的 window 中打开runningrss ,并在同一 window 中打开虚拟医生。
You might want to arrange your HTML so that the user can still open all of the links even if JavaScript isn't enabled.您可能需要安排您的 HTML 以便用户仍然可以打开所有链接,即使 JavaScript 未启用。 (We call this progressive enhancement.) If so, something like this might work well:
(我们称之为渐进式增强。)如果是这样,这样的事情可能会很好用:
<ul class="yourlinks">
<li><a href="http://www.google.com/"></li>
<li><a href="http://www.yahoo.com/"></li>
</ul>
$(function() { // On DOM content ready...
var urls = [];
$('.yourlinks a').each(function() {
urls.push(this.href); // Store the URLs from the links...
});
var multilink = $('<a href="#">Click here</a>'); // Create a new link...
multilink.click(function() {
for (var i in urls) {
window.open(urls[i]); // ...that opens each stored link in its own window when clicked...
}
});
$('.yourlinks').replaceWith(multilink); // ...and replace the original HTML links with the new link.
});
This code assumes you'll only want to use one “multilink” like this per page.此代码假定您只想在每页使用一个这样的“多重链接”。 (I've also not tested it, so it's probably riddled with errors.)
(我也没有测试过它,所以它可能充满了错误。)
You can open multiple windows on single click... Try this..您可以单击打开多个 windows...试试这个..
<a href="http://--"
onclick=" window.open('http://--','','width=700,height=700');
window.open('http://--','','width=700,height=500'); ..// add more"
>Click Here</a>`
I created a bit of a hybrid approach between Paul & Adam's approach:我在 Paul 和 Adam 的方法之间创建了一些混合方法:
The link that opens the array of links is already in the html.打开链接数组的链接已经在 html 中。 The jquery just creates the array of links and opens each one when the "open-all" button is clicked:
jquery 只是创建链接数组并在单击“全部打开”按钮时打开每个链接:
HTML: HTML:
<ul class="links">
<li><a href="http://www.google.com/"></a></li>
<li><a href="http://www.yahoo.com/"></a></li>
</ul>
<a id="open-all" href="#">OPEN ALL</a>
JQUERY: JQUERY:
$(function() { // On DOM content ready...
var hrefs = [];
$('.links a').each(function() {
hrefs.push(this.href); // Store the URLs from the links...
});
$('#open-all').click(function() {
for (var i in hrefs) {
window.open(hrefs[i]); // ...that opens each stored link in its own window when clicked...
}
});
});
You can check it out here: https://jsfiddle.net/daveaseeman/vonob51n/1/你可以在这里查看: https://jsfiddle.net/daveaseeman/vonob51n/1/
If you prefer to inform the visitor which links will be opened, you can use a JS function reading links from an html element.如果您希望通知访问者哪些链接将被打开,您可以使用 JS function 从 html 元素中读取链接。 You can even let the visitor write/modify the links as seen below:
您甚至可以让访问者编写/修改链接,如下所示:
<script type="text/javascript">
function open_all_links() {
var x = document.getElementById('my_urls').value.split('\n');
for (var i = 0; i < x.length; i++)
if (x[i].indexOf('.') > 0)
if (x[i].indexOf('://') < 0)
window.open('http://' + x[i]);
else
window.open(x[i]);
}
</script>
<form method="post" name="input" action="">
<textarea id="my_urls" rows="4" placeholder="enter links in each row..."></textarea>
<input value="open all now" type="button" onclick="open_all_links();">
</form>
Here is a basic implementation in javascript - I separated it into an external file这是 javascript 中的基本实现 - 我将其分离到外部文件中
HTML HTML
<a href="" id="multi-link-opener" onclick="openMultipleLinks(myLinks)">Click To Open Links</a>
JS JS
var myLinks = [
"https://google.com",
"https://www.w3schools.com/jsref/met_win_open.asp",
"https://developer.mozilla.org/en-US/docs/Web/API/Window/open"
]
function openMultipleLinks(links) {
for (var i = 0; i < links.length; i ++) {
window.open(links[i]);
}
}
Note that the user will have to enable pop-ups for the pages to open.请注意,用户必须启用弹出窗口才能打开页面。
Here it is in action: https://jsfiddle.net/cuppajoeman/rjavuhcg/它正在运行: https://jsfiddle.net/cuppajoeman/rjavuhcg/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.