Question

我用javascript写了一段代码：

当用户点击链接时，应显示加载图片，直到下一页加载。
用户只需单击链接即可正常工作，加载图像可见，直到下一页加载。但问题是当用户使用CTRL按钮点击链接时。目标页面在浏览器的新选项卡中打开，并在链接点击的页面上，连续显示加载div。

＆＃13;

function ShowLoading(e) {
  var div = document.createElement('div');
  var img = document.createElement('img');
  img.src = 'pageloaderB.gif';
  img.style.cssText = 'border:0px';
  div.innerHTML = "<b style=color:black;font-size:40px;font-family:calibri>Processing Request  Please Wait</b><br><br><br>";
  div.style.cssText = 'padding-top:200px;position: fixed; top: 0px; left: 0px; z-index: 5000; width: 100%; height:100%; text-align: center; background:white;opacity: .8;';
  div.appendChild(img);
  document.body.appendChild(div);
  return true;
}

＆＃13;

<a href="dashboard.php" class="ico1" onclick="ShowLoading()">Dashboard</a>

＆＃13;

使用Javascript：

请帮我关闭这个。无论是简单点击还是CTRL +点击，当页面完全加载时，加载div必须是不可见的。

Answer 1

使用localStorage引入“全局”变量，即跨越多个标签的变量。

点击链接后，您将localStorage['loading']设置为true，并在每个页面的window.onload事件中将其设置为false。

显示图像时，启动一个持续检查变量的Interval。当新选项卡中的页面已加载且变量设置为false时，间隔功能将隐藏图像并停止其间隔。

（这个答案比简单地检查是否按下了Ctrl键更复杂，但它甚至可以用鼠标中键或其他方式在新标签中打开链接。）

Answer 2

您可以检查事件对象的Ctrl，Shift和Meta键属性。如果其中一个为真，则保持键控制，移位或元（Apple的命令）键。您将找到一个有用的JavaScript代码段，可帮助解决此问题：How to detect if user it trying to open a link in a new tab?

Answer 3

而不是使用onclick链接使用事件beforeunload。因此，这将避免对ShowLoading进行不必要的调用。

如果是普通的javascript：

window.onbeforeunload=ShowLoading;

使用jQuery：

$(window).on('beforeunload',ShowLoading);

Javascript Div加载图片无法正常使用

3 个答案: