Question

我的这个JavaScript文件加载了<script> HTML标记：

<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
    }
});

Answer 1

动态添加外部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

Answer 2

如果我正确理解了您的问题，您希望回调功能响应文档就绪和窗口大小调整事件。

为此你需要创建一个全局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(); }
});

禁用使用<script>标记</script>加载的特定javascript

编辑：

2 个答案: