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

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

让我们想象一下，我们有一个基于模板的网站，重新编写内容IST设置规则，jQuery的可用，它基本上是这样的：

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

内容“信息”包含一个按钮，我们希望点击时会发生什么情况，当您将鼠标悬停在文本字段上时，内容“提醒”应该会显示为一条消息。

什么是引发这些行动，而不会在一个错误的最好方式，因为对象是不是发现了什么？

选项之一：使用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未定义，则会引发错误。

来源

2012-03-06 Johannes Staehlin

一个好主意是只在需要它的页面上包含javascript，而'$（document）.ready'可能会在页面上多次调用，所以你应该在这里安全。 – 2012-03-06 05:30:52

如果您使用jQuery，则不需要检查元素是否存在，然后再分配事件处理程序：“$（”someselector“）。click（...）'将点击处理程序应用于_zero或more_元素匹配“someselector” - 如果没有匹配，则不会发生错误。 – nnnnnn 2012-03-06 05:31:51

@IanBishop：这是选项三:) - >加载模板的js @ nnnnnn：看到我的编辑，但你说得对，关于'只'点击动作 – 2012-03-06 05:38:05

有点不同的方法不是检查URL路径：您可以在一个单一的功能，然后在每一组页面特有的事件处理器包括有一个domready中，将调用这些函数。

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

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

来源

2012-03-06 05:45:51 Nikhil

我认为这是做这些事情的最简单的方法，它很容易阅读和调试。选项一我认为就像前端控制器不坏，但可能会导致一团糟。另外，当有别名会很难。如果有一个框架来自动化这种方式，这可能会工作......页面类的方法似乎也是个好主意。 – GorillaApe 2012-04-09 17:17:11

最适合我的是内联脚本，它只在该页面上调用函数。 – AntonB 2017-01-27 22:19:08

我会使用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; 
}

希望这有助于 -

干杯。

来源

2012-03-06 05:44:03 Ohgodwhy

。 jQuery.getScript（）有用 – Bamboo 2012-03-06 05:49:16

很好的方法来重新加载js文件。 :) – 2012-03-06 05:55:36

将class属性设置为您的身体标记。

<body class="PageType">

然后在你的脚本..

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

来源

2012-03-06 06:22:45

我认为将类名添加到每个页面是一种很好的做法..对于js和css都是这样的 – Damon 2012-05-11 14:57:37

不是一个坏主意，除非有人将类重命名为 – Neil 2014-03-19 10:11:39

加上这个方法;使用[jQuery'is]（http://api.jquery.com/is/） – numediaweb 2014-04-13 13:06:18

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

来源

2017-07-04 07:26:06

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

回答

相关问题