Question

您好我用Javascript制作一个Timer，它运行正常。当它完成5秒计数时，代码启用了一个打开网络的目标，但是当我点击它不工作时。我在计时器外面尝试这个代码，它的工作完美。错误是什么？

<?php
$windowsOpen .= "window.open('$value', '_blank');";
?>

<script type="text/javascript">
function countDown(secs,elem){
var element = document.getElementById(elem);
element.innerHTML = "Please wait for "+secs+" seconds";
if(secs < 1){
    clearTimeout(timer);
    element.innerHTML='<p><a href="#" onclick="<?= $windowsOpen; ?>">Click to open webs</a></p>';
}
secs--;
var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
</script>
<div id="status"></div>
<script type="text/javascript">countDown(5,"status");</script>

Answer 1

内联事件处理程序基本上是在HTML标记内部进行评估 - 它们是不好的做法，导致代码性能差，难以管理的代码。请认真考虑使用JavaScript附加事件：developer.mozilla.org/en/DOM/element.addEventListener

如果您绝对需要使用Javascript处理窗口开启器而不是浏览器的良好原生行为，那么请定义您希望人们预先导航到的URL，然后附加一个在创建元素时监听元素：

<?php
$url = 'https://www.google.com';
?>

<script type="text/javascript">
var url = '<?=$url;?>';
var timer;
function countDown(secs,elem){
  var element = document.getElementById(elem);
  element.innerHTML = "Please wait for "+secs+" seconds";
  if(secs < 1){
    element.innerHTML='<p><a href="#">Click to open link</a></p>';
    element.querySelector('a')
      .addEventListener('click', () => {
        window.open(url);
      });
  } else {
    secs--;
    setTimeout(countDown, 1000, secs, elem);
  }
}
</script>
<div id="status"></div>
<script type="text/javascript">countDown(5,"status");</script>

您还应该避免在eval中使用setTimeout - 总是在普通JS中写出函数，而不是将字符串解析为函数。

但如果你让他们使用浏览器的正常行为让他们自己点击链接，那么对用户不太友好：

element.innerHTML='<p><a href="#">Click to open link</a></p>';
element.querySelector('a')
  .href = url;

在setTimeout

1 个答案: