Question

我目前遇到的问题是我只想获取带有class =“okPop”的链接打开，然后链接是名为popupA.html和popupB.html的本地html文件。为了阻止弹出窗口默认使用href打开链接我使href未定义。现在有些链接什么都不做。我希望我的JS代码能够触发一个弹出窗口，但什么也没发生。

HTML code：

<!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.

Answer 1

首先，您的脚本有许多语法错误;你在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的类特定链接

1 个答案: