我目前遇到一个问题，我只想打开带有 class = "okPop"的链接，然后链接是名为 popupA.html 和 popupB.html 的本地 html 文件。为了阻止弹出窗口默认使用 href 打开链接，我将 href 设为未定义。现在有些链接什么都不做。我希望我的 JS 代码触发弹出窗口，但什么也没有发生。
HTML代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Popup Windows</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Script 9.4 - popups.html -->
<!-- Bullet 8: Add class -->
<p><a href="javascript:undefined" class="okPop" id="B" target="PopUp">B Link</a> (Will open in a new window.)</p>
<p><a href="javascript:undefined" class="1" id="A" target="PopUp">A Link</a> (Will open in a new window.)</p>
<script src="js/popups.js"></script>
</body>
</html>
Javascript 代码
// Function called when the link is clicked.
function createPopup(e) {
'use strict';
// Get the event object:
if (typeof e == 'undefined') var e = window.event;
// Get the event target:
var popupClass = e.class || e.srcElement;
var link = "popup" + document.getElementByID(id) + ".html";
// Create the window:
var popup = window.open(link, 'PopUp', 'height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes');
// Give the window focus if it's open:
if ( (popup !== null) && !popup.closed) {
popup.focus();
return false; // Prevent the default behavior.
} else { // Allow the default behavior.
return true;
}
} // End of createPopup() function.
// Establish functionality on window load:
window.onload = function() {
'use strict';
// Add the click handler to each link:
for (var i = 0, count = document.links.length; i < count; i++) {
// IF statement to trigger specific class value : Bullet 9
if (document.links[i].className == "okPop"){
if (document.getElementsByClassName('okPop').value){
popupLinks[i].onclick = createPopup;
}else{
document.links[i].onclick = createPopup;
} // End of for loop.
}; // End of onload function.
最佳答案
首先，您的脚本有一些语法错误；您在 window.onload 函数中缺少两个右括号。它应该看起来像这样:
// Establish functionality on window load:
window.onload = function() {
'use strict';
// Add the click handler to each link:
for (var i = 0, count = document.links.length; i < count; i++) {
// IF statement to trigger specific class value : Bullet 9
if (document.links[i].className == "okPop"){
if (document.getElementsByClassName('okPop').value){
popupLinks[i].onclick = createPopup;
}else{
document.links[i].onclick = createPopup;
} // close the 'else' case
} // close the 'if doc.links[i].classname' case
} // End of for loop.
}; // End of onload function.
修复该问题后，您将从 createPopup 收到引用错误 - id 未定义。此外，在构建链接时，如果您只需要元素的 ID，则需要整个元素:
// Function called when the link is clicked.
function createPopup(e) {
'use strict';
// Get the event object:
if (typeof e == 'undefined') {
// I personally always use braces for clarity. Also, redefining
// var e inside an if statement might not behave the way you expect.
e = window.event;
}
// Get the event target:
var popupClass = e.class || e.srcElement;
// you get the event target but then you never reference it.
//we already have the element, now use its id to construct the link:
var link = "popup" + popupClass.id + ".html";
// Create the window:
var popup = window.open(link, 'PopUp', 'height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes');
// Give the window focus if it's open:
if ( (popup !== null) && !popup.closed) {
popup.focus();
return false; // Prevent the default behavior.
} else { // Allow the default behavior.
return true;
}
} // End of createPopup() function.
试试看 - 它对我有效，但我只在 Chrome 上测试过。
关于Javascript 不打开带有 HTML href 的类特定链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26514897/