Question

我想知道在特定页面上执行java脚本代码的最佳方法是什么。

让我们假设我们有一个基于模板的网站，内容集的重写规则，jquery可用，它基本上是这样的：

  <!DOCTYPE html>
  <html>
   <head>
    <script src="script.js"></script>
   </head>
   <body>
    ...
    include $content;
    ..
   </body>
</html>

内容'信息'包含一个按钮，我们希望在点击时发生某些事情，当您悬停文本字段时，内容'alert'应该作为消息提供。

触发这些操作的最佳方法是什么，而不会遇到错误，因为找不到该对象？

选项一：使用 window.location.pathname

 $(document).ready(function() {
      if (window.location.pathname == '/info.php') {
          $("#button1").click(function(){'
            //do something
          })
      }else if(window.location.pathname == '/alert.php'){
           $("#mytextfield").hover(){
             alert('message');
           }
    }

选项二：检查元素是否存在

$(document).ready(function() {
  if ($("#button1").length > 0) {
      $("#button1").click(function(){'
        //do something
      })
  }else if ($("#mytextfield").length > 0){
       $("#mytextfield").hover(){
         alert('message');
       }
}

选项三：在加载的模板中包含脚本

//stands for itself

他们是更好的解决方案吗？或者我必须与这些解决方案中的一个相处？

您的体验，用法或与此主题相关的任何链接均受到赞赏。

//编辑：

我可能选择了一个不好的例子，实际的代码可能是：

    mCanvas = $("#jsonCanvas");
    mMyPicture = new myPicture (mCanvas);

其中myPicture构造函数获取canvas元素的上下文，如果未定义mCanvas，则抛出错误。

Answer 1

为您的正文标记设置class属性。

<body class="PageType">

然后在你的剧本中......

$(function(){
  if($('body').is('.PageType')){
    //add dynamic script tag  using createElement()
    OR
    //call specific functions
  }
});

Answer 2

我会使用switch语句和变量。（我正在使用jQuery！）

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname

switch(windowLoc){      
  case "/info.php":
    //code here
    break;
  case "/alert.php":
    //code here
    break;
}

//use windowLoc as necessary elsewhere

这将允许您根据您所在的页面更改“按钮”的功能。如果我理解你的问题;这就是我要做的。另外，如果我提供了大量的javascript，我只需要完全添加一个新的JS文件。

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname

switch(windowLoc){      
  case "/info.php":
    var infoJS = document.createElement('script');
    infoJS.type = 'text/javascript';
    infoJS.src = 'location/to/my/info_file.js';
    $('body').append(infoJs);
    break;
  case "/alert.php":
    var alertJS = document.createElement('script');
    alertJS.type = 'text/javascript';
    alertJS.src = 'location/to/my/alert_file.js';
    $('body').append(alertJs);
    break;
}

希望这有帮助 -

干杯。

Answer 3

与检查URL路径有点不同的方法：您可以在单个函数中对页面特定的事件处理程序进行分组，然后在每个包含中使用domready来调用这些函数。

例如：在script.js中你有两个功能（在domready之外）即。 onPage1Load()和onPage2Load()。

在您的page1.php中，您有一个$(document).ready(onPage1Load) 等等其他页面。这将确保未注册非预期的事件处理程序。

Answer 4

您可以使用Require js（RequireJS是一个JavaScript文件和模块加载器）并加载脚本（如果只需要它们）。链接是http://requirejs.org/，我知道使用require js并不那么容易。

Answer 5

你也可以使用 vanilla javascript 来做同样的事情

console.log(window.location.href);
const host = "http://127.0.0.1:5500/";
// JAVASCRIPT FOR INDEX PAGE 
if (window.location.href == host + 'index.html') {
    console.log("this is index page");
}

// JAVASCRIPT FOR ORDER PAGE 
if (window.location.href == host + 'order.html') {
    console.log("this is order page");
}

仅在特定页面上执行js的最佳方法

5 个答案: