JavaScript - 从类名获取大小并打开新窗口

Question

很长一段时间以来，我一直在使用一个简单的 JavaScript 文件以及“a”标记中的内联 onclick 事件，以便在单击链接时打开一个新窗口。正如您从下面的示例中看到的，我在 HTML 中添加了窗口的类型和大小。在下面的示例中，窗口无法由用户调整大小，窗口居中且宽 1010 x 高 730。

HTML 示例:

<a href="https://example.com" target='_blank' onclick="popUp(this.href,'elasticNoC',1010,730);return false;">

JavaScript 文件:

var newWin = null;
    function popUp(strURL, strType, strWidth, strHeight) {
    LeftPosition = (screen.width) ? (screen.width-strWidth)/2 : 0;
    TopPosition = (screen.height) ? (screen.height-strHeight)/2 : 0;
     if (newWin !== null && !newWin.closed)
       newWin.close();
     var strOptions="";
     if (strType=="consoleC")
       strOptions="resizable,top="+TopPosition+',left='+LeftPosition+",height="+
         strHeight+",width="+strWidth;
     if (strType=="fixedC")
       strOptions="status,top="+TopPosition+',left='+LeftPosition+",height="+
         strHeight+",width="+strWidth;
     if (strType=="elasticC")
       strOptions="toolbar,menubar,scrollbars,"+
         "resizable,location,top="+TopPosition+',left='+LeftPosition+",height="+
         strHeight+",width="+strWidth;
    if (strType=="elasticNoC")
       strOptions="scrollbars,"+
         "resizable,top="+TopPosition+',left='+LeftPosition+",height="+
         strHeight+",width="+strWidth;
    if (strType=="console")
       strOptions="resizable,height="+
         strHeight+",width="+strWidth;
     if (strType=="fixed")
       strOptions="status,height="+
         strHeight+",width="+strWidth;
     if (strType=="elastic")
       strOptions="toolbar,menubar,scrollbars,"+
         "resizable,location,height="+
         strHeight+",width="+strWidth;
    if (strType=="elasticNo")
       strOptions="scrollbars,"+
         "resizable,height="+
         strHeight+",width="+strWidth;
     newWin = window.open(strURL, 'newWin', strOptions);
     newWin.focus();
    }

网络应用程序的最新更新现在正在剥离内联 JavaScript，因此我以前的处理方式不再有效。

我仍然可以包含单独的 JavaScript 文件，但不能包含内联 JavaScript。

我认为最好的选择是用特定的类名替换内联的 onclick 事件，并使用 JavaScript 从类名中获取窗口类型和大小。

新 HTML 示例:

<a class="red elasticNoC-1010-730" href="https://example.com" target="_blank">

我无法弄清楚要使用的正确 JavaScript。有人可以提供可以用作替代品的 JavaScript 代码吗？正如您在新的 HTML 示例中所看到的，我的一些链接可能包含多个类名。在此示例中，类名“red”将被忽略，因为它与 JavaScript 文件中的任何“strType”都不匹配。

Answer 1

不要使用类，使用data-*属性:

<a class="red" data-popup="elasticNoC-1010-730" href="https://example.com" target="_blank">TEST CLICK</a>

JS 会是这样的:

// var newWin = null; function popUp( ............etc


const handlePopup = (ev) => {
  ev.preventDefault();                       // Prevent browser default action
  const EL = ev.currentTarget;               // Get the element
  const args = EL.dataset.popup.split("-");  // Get the data-* parts
  args.unshift(EL.getAttribute("href"));     // Prepend HREF to parts
  return popUp(...args);                     // Call popUp with arguments
};

const EL_popup = document.querySelectorAll('[data-popup]');
EL_popup.forEach(el => el.addEventListener('click', handlePopup));

处理类

处理自定义属性值的类从来都不是一个好主意，因为它主要成为解析问题，因为 HTML 属性 class 可以包含任意顺序和数量的多个类。

但幸运的是您可以创建一个特定的前缀类名(使用popUp-)，例如

    popUp-elasticNoC-1010-730

然后使用该特定前缀作为分割感兴趣的特定字符串部分的引用，同时也作为元素选择器:

querySelectorAll('[class*=" popUp-"], [class^="popUp-"]')

这是一个例子:

const handlePopup = (ev) => {
  ev.preventDefault();                         // Prevent browser default action
  const EL = ev.currentTarget;                 // Get the element
  const classPopUp = [...EL.classList].filter(cl => cl.startsWith("popUp-"))[0];
  const args = classPopUp.split('-');          // Convert class item to array    
  args.shift();                                // remove "popUp-" prefix
  args.unshift(EL.getAttribute("href"));       // Prepend HREF to parts
  return popUp(...args);                       // Call popUp with arguments
};

const EL_popup = document.querySelectorAll('[class*=" popUp-"], [class^="popUp-"]');
EL_popup.forEach(el => el.addEventListener('click', handlePopup));

<a class="red popUp-elasticNoC-1010-730 foo-bar" href="https://example.com" target="_blank">TEST CLICK</a>