javascript - 在特定窗口大小中打开链接

Question

我有一个运行良好的随机图像脚本。我试图在特定窗口大小中打开一个链接，该链接不想工作并应用于随机图像链接。

如果它不在随机图像脚本中，它就可以正常工作。

有什么方法可以让它在随机图像脚本中工作吗？

这是我的代码:

<SCRIPT LANGUAGE="Javascript">
function banner() { } ; b = new banner() ; n = 0

b[n++]= "<a href='https://youtu.be/IeIqaNR5Zs4' target='_blank'    
onclick='window.open(href,                '', 'height=300, width=450,  
left=300, top=300'); return false;'> <IMG name=randimg 
SRC='images/random/balboapark.png' alt='Balboa Park Picture'>"

b[n++]= "<a href='https://www.youtube.com/watch?v=w6UzpzMwwT8'> <IMG  
name=randimg SRC='images/random/zoo.png' alt='San Diego Zoo Picture'>"

b[n++]= "<a href='https://www.youtube.com/watch?v=w6UzpzMwwT8'> <IMG 
name=randimg SRC='images/random/zoo.png' alt='San Diego Beach Picture'>"

i=Math.floor(Math.random() * n) ; 
document.write( b[i] )
</SCRIPT>



This opens in the specific window size.

<a target="_blank" href="https://youtu.be/IeIqaNR5Zs4" 
onclick="window.open    (href,                '', 'height=300, width=450, 
left=300, top=300'); return false;"><IMG SRC='images/random/balboapark.png' 
alt='Balboa Park Picture'></a>

Answer 1

如果我正确理解你的问题，那么这段代码应该能达到你的要求。而不是使用document.write() ，这种方法直接与 DOM API 交互，并且还使用 click 的事件监听器。事件触发window.open() 。

请注意，此代码在堆栈溢出代码段“沙箱”中不起作用，因此您需要直接在自己的项目中尝试此解决方案:

// Function configures DOM elements for a single banner based 
// on provided input parameters
function createBanner(url, src, alt) {

  // Create the image and assign alt/src attributes
  let img = document.createElement('img');
  img.setAttribute('src', src);
  img.setAttribute('alt', alt);

  // Create the anchor, assign attributes and click listener
  let a = document.createElement('a');
  a.setAttribute('href', url);
  a.addEventListener('click', function() {

    window.open(url, '', 'height=300, width=450, left=300, top=300');
    return false
  });

  // Add image to anchor
  a.appendChild(img);

  // Return anchor for external use
  return a
}

// Create banners from your input data
[
  createBanner('https://youtu.be/IeIqaNR5Zs4', 'images/random/balboapark.png', 'Balboa Park Picture'),
  createBanner('https://youtu.be/w6UzpzMwwT8', 'images/random/zoo.png', 'San Diego Zoo Picture'),
  createBanner('https://youtu.be/w6UzpzMwwT8', 'images/random/beach.png', 'San Diego Beach Picture'),
]
.forEach(function(e, i, array) {

  // Iterate through each banner, and for each banner, 
  // select a random banner from the collection to be
  // added to the DOM
  const banner = array[Math.floor(Math.random() * array.length)];
  
  document.body.appendChild(banner);
})