禁用加载了<script>标签的特定JavaScript

Disabling specific javascript loaded with the <script> tag

本文关键字：标签 JavaScript script 加载      更新时间：2023-09-26

我用<script> HTML标签加载了这个JavaScript文件：

<script type="text/javascript" charset="utf-8" src="adobeEdge_animation.js"></script>

我想让它仅在浏览器width超过500px时才工作。

我知道一种方法可以做到这一点，那就是基本上复制文件的所有内容并将其粘贴到resize事件中，如下所示：

$(document).ready(function(){
    if ($(window).width() > 480) {
        //all the code inside of that file
    }
});
$(window).resize(function(){
    if ($(this).width() > 480) {
        //all the code inside of that file
    }
}

但我仍然确信还有另一种方法，我正在寻找一种更简单或更容易的方法。

编辑：

index.php文件的结构使其内容动态化， 

<body>
  <div id="big_wrapper">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>jQuery.get(source);</script>
    <?php include('includes/header.php'); ?>
    <article>
      <section>
        <?php
          if(isset($p)){
            switch ($p) {
              case 'introduccion':
                include('content/introduccion.php');
                break;
              case 'marketing_digital':
                include('content/marketing.php');
                break;
              case 'diseño_web':
                include('content/web.php');
                break;
              case 'diseño_grafico':
                include('content/grafico.php');
                break;
              case 'crm':
                include('content/crm.php');
                break;
              case 'eventos':
                include('content/eventos.php');
                break;
              case 'contact':
                include('content/contact.php');
                break;
              default:
                include('content/introduccion.php');
                break;
            }
          } else {
            include('content/introduccion.php');
          }
        ?>
      </section>
    </article>
    <?php include('includes/footer.php'); ?>
  </div>
</body>

关键是要使脚本只在introduccion.php中工作，所以浏览器中显示的HTML看起来像这样：

<body>
  <div id="big_wrapper">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>jQuery.get(source);</script>
    <?php include('includes/header.php'); ?>
    <article>
      <section>
        <!--<script type="text/javascript" charset="utf-8" src="adobeEdge_animation.js"></script>-->
        <script type="text/javascript" src="js/script.js"></script>
        <style>
            .edgeLoad-adobeEdge_animation { visibility:hidden; }
        </style>
        <h2 lang="sp">Introducción</h2>
        <h2 lang="en">Introduction</h2>
        <div class="first_text">
          <div id="Stage" class="texto_aim_web_marketing"></div>
          <p lang="sp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, rerum.</p>
          <p lang="sp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, quod.</p>
          <p lang="en">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, nostrum.</p>
          <p lang="en">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vel.</p>
          <div class="first_text">
            <p lang="sp" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quo ut quidem mollitia tenetur maxime.</p>
            <p lang="en">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, commodi natus quia voluptas iure libero.</p>
          </div>
        </div>
      </section>
    </article>
    <?php include('includes/footer.php'); ?>
  </div>
</body>

这是我的JavaScript（js/script.js）

function loadjsfile(filename){    
   var fileRef = document.createElement('script');
   fileRef.setAttribute("type","text/javascript");
   fileRef.setAttribute("charset","utf-8");
   fileRef.setAttribute("src", filename);    
   if (typeof fileRef!="undefined")
      document.getElementsByTagName("section")[0].appendChild(fileRef);
   }
}
$(document).ready(function(){
    if ($(window).width() > 640) {
        loadjsfile("myAnimation_edgePreload.js"); //dynamically load and add this .js file
    }
});
$(window).resize(function(){
    if ($(this).width() > 640) {
        loadjsfile("myAnimation_edgePreload.js"); //dynamically load and add this .js file
    }
});

动态添加外部 JavaScript 的一种方法

function loadjsfile(filename){    
   var fileRef = document.createElement('script');
   fileRef.setAttribute("type","text/javascript");
   fileRef.setAttribute("src", filename);    
   if (typeof fileRef!="undefined")
      document.getElementsByTagName("head")[0].appendChild(fileRef);
   }
}
loadjsfile("myscript.js"); //dynamically load and add this .js file

如果我正确理解您的问题，您希望有一个回调函数响应文档就绪和窗口大小调整事件。

为此，您需要创建一个全局Function（在您的脚本文件中）

function adobeEdge_animation( )
{
    /*code*/
}

然后使用SCRIPT元素导入它

<script type="text/javascript" charset="utf-8" src="adobeEdge_animation.js">

现在你可以这样做

$(document).ready(function(){
    if ($(window).width() > 480) { adobeEdge_animation(); }
});
$(window).resize(function(){
  if ($(this).width() > 480) { adobeEdge_animation(); }
});
相关文章：