Question

我一直在尝试为网站实现辅助功能，我的一个要求就是在点击2个链接时激活或停用灰度。用户仍在Internet Explorer 11上，因此必须与该导航器兼容。

到目前为止，我已经实现了一些我在网上找到的样式和代码，这些样式和代码都运行良好，我调整了代码，因此我有2个执行javascript函数的超链接。一个用于启用灰度，另一个用于禁用灰度。

但我有一个问题，每当我加载页面时，灰度总是从一开始就打开。我希望灰度启动禁用，然后通过单击我的一个链接启用。

使用Chrome和Firefox进行测试时，默认情况下会通过添加＆＃34;灰度关闭＆＃34;来关闭灰度级。我的图像类。尽管如此，Internet Explorer仍然存在问题。

所以，我尝试强制调用我的javascript函数来禁用几个部分的灰度：

体

<body onload='enableEG(null)'>

图像本身

<img src="img/FOV_8967.JPG" alt="Goal 1" width="600" height="400" class="grayscale grayscale-off" onload="enableEG(null)">

在必需的脚本标记

上

<script src="js/jquery.gray.min.js" onload="enableEG(null)"></script>

甚至尝试在关闭body标签之前一直创建一个新的脚本标记到我的代码底部。

<script>enableEG(null);</script>

有趣的是，我在执行函数时会弹出一些警告，并且在使用强制函数调用在IE中加载页面时会出现这些警报，但是，图像最初仍会被灰度化。

这是我的整个html代码供参考（没有强制调用该函数）：

<!DOCTYPE html>
<html class="no-js">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Gray</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/gray.min.css">
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <script>

function enableEG(t){       
   var activeT = t; 
   //Internet Explorer
   var isIE = /*@cc_on!@*/false || !!document.documentMode;
   if (isIE) {
      if ( activeT == null ){
         alert ("activateEG1: NULL; disable");
         $('.grayscale').toggleClass('grayscale-off',true);
      }
      else {
         alert ("activateEG1: 1; enable");
         $('.grayscale').toggleClass('grayscale-off',false);     
      }
   }
   //Other navigators
   else {
      if ( activeT == null ){
         document.documentElement.style.webkitFilter = 'grayscale(0%)';
      }
      else {
         document.documentElement.style.webkitFilter = 'grayscale(100%)';
      }        
   }
}

      </script>
   </head>
   <body>
      <p>Grayscale Test</p>   
      <p><a id="linkEnable" href="#" onclick="enableEG(1);">Enable</a></p>
      <p><a id="linkDisable" href="#" onclick="enableEG(null);">Disable</a></p>
      <div class="gallery">
         <a target="_blank" href="img/FOV_8967.JPG">
            <img src="img/FOV_8967.JPG" alt="Goal 1" width="600" height="400" class="grayscale grayscale-off"> 
         </a>
         <div class="desc">Goal 1</div>
         <a target="_blank" href="img/FOV_9088.JPG">
         <img src="img/FOV_9088.JPG" alt="Goal 2" width="600" height="400" class="grayscale grayscale-off">
         </a>
         <div class="desc">Goal 2</div>
      </div>
      <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
      <script src="js/jquery.gray.min.js"></script>
   </body>
</html>

任何帮助将不胜感激！

更新

发现我可以在调用外部js之后在Window Load事件上执行脚本时关闭灰度，并且它在单个索引页面上就像一个魅力！

<script>
   $(window).on('load', function() {
      alert ("script function: turn off gray");                    
      enableEG(null);
   });
</script>

但是，我仍然在寻找更持久的解决方案，因为此修复程序不适用于超出我测试网站索引的内部网页。

加载页面时，在IE11上关闭灰度

0 个答案: