多个 HTML 文件仅链接到一个 Javascript 文件

Question

我希望将外部 Javascript 文件中的函数链接到我的每个 html 文件。但是，我希望将某些函数链接到一个 html 文件，而将其他函数链接到另一个 html 文件。我需要有多个 Javascript 文件还是可以将它们压缩成一个文件？当我尝试使用一个 Javascript 文件时，每个函数都会在我的每个页面上运行。有没有办法在没有整个代码的情况下调用 html 中的特定函数？就像 css 在 html 中使用 #example 作为 id example 一样。

我在我的 index.html 文件中使用了这个链接：

<script type="text/javascript" src="example.js"></script>

虽然这个在另一个 html 文件中：

<script type="text/javascript" src="example2.js"></script>

这些链接是我的 html 文件中包含的唯一 Javascript。

我不确定是否需要额外的 Javascript 或 html 代码示例，因为这似乎是一个普遍问题。虽然，如果需要更多代码，请告诉我具体是什么，我很乐意添加它。我也是编码新手，所以如果你能在否决之前问一下，我将不胜感激。

我想我找到了问题所在。我有一个来自免费网站的 RSS 提要，但该功能旁边没有任何内容。

html 文件链接到包含 this 的 Javascript 文件，因为该函数是空白的，所以它会自动运行，或者这就是我的假设。

(function(){
var a=window;
var b="";
for(i=0;i<a.rssfeed_url.length;i++) {
    b=b+"rssfeed[url]["+i+"]="+encodeURIComponent(a.rssfeed_url[i])+"&"
}
var c="http://feed.surfing-waves.com/php/rssfeed.php"+"?"+b+"rssfeed[type]="+(a.rssfeed_type?a.rssfeed_type:"")+"&rssfeed[frame_width]="+a.rssfeed_frame_width+"&rssfeed[frame_height]="+a.rssfeed_frame_height+"&rssfeed[scroll]="+(a.rssfeed_scroll?a.rssfeed_scroll:"")+"&rssfeed[scroll_step]="+(a.rssfeed_scroll_step?a.rssfeed_scroll_step:"")+"&rssfeed[scroll_bar]="+(a.rssfeed_scroll_bar?a.rssfeed_scroll_bar:"")+"&rssfeed[target]="+(a.rssfeed_target?a.rssfeed_target:"")+"&rssfeed[font_size]="+(a.rssfeed_font_size?a.rssfeed_font_size:"")+"&rssfeed[font_face]="+(a.rssfeed_font_face?a.rssfeed_font_face:"")+"&rssfeed[border]="+(a.rssfeed_border?a.rssfeed_border:"")+"&rssfeed[css_url]="+(a.rssfeed_css_url?encodeURIComponent(a.rssfeed_css_url):"")+"&rssfeed[title]="+(a.rssfeed_title?a.rssfeed_title:"")+"&rssfeed[title_name]="+(a.rssfeed_title_name?a.rssfeed_title_name:"")+"&rssfeed[title_bgcolor]="+(a.rssfeed_title_bgcolor?encodeURIComponent(a.rssfeed_title_bgcolor):"")+"&rssfeed[title_color]="+(a.rssfeed_title_color?encodeURIComponent(a.rssfeed_title_color):"")+"&rssfeed[title_bgimage]="+(a.rssfeed_title_bgimage?encodeURIComponent(a.rssfeed_title_bgimage):"")+"&rssfeed[footer]="+(a.rssfeed_footer?a.rssfeed_footer:"")+"&rssfeed[footer_name]="+(a.rssfeed_footer_name?a.rssfeed_footer_name:"")+"&rssfeed[footer_bgcolor]="+(a.rssfeed_footer_bgcolor?encodeURIComponent(a.rssfeed_footer_bgcolor):"")+"&rssfeed[footer_color]="+(a.rssfeed_footer_color?encodeURIComponent(a.rssfeed_footer_color):"")+"&rssfeed[footer_bgimage]="+(a.rssfeed_footer_bgimage?encodeURIComponent(a.rssfeed_footer_bgimage):"")+"&rssfeed[item_bgcolor]="+(a.rssfeed_item_bgcolor?encodeURIComponent(a.rssfeed_item_bgcolor):"")+"&rssfeed[item_bgimage]="+(a.rssfeed_item_bgimage?encodeURIComponent(a.rssfeed_item_bgimage):"")+"&rssfeed[item_title_length]="+(a.rssfeed_item_title_length?a.rssfeed_item_title_length:"")+"&rssfeed[item_title_color]="+(a.rssfeed_item_title_color?encodeURIComponent(a.rssfeed_item_title_color):"")+"&rssfeed[item_border_bottom]="+(a.rssfeed_item_border_bottom?a.rssfeed_item_border_bottom:"")+"&rssfeed[item_source_icon]="+(a.rssfeed_item_source_icon?a.rssfeed_item_source_icon:"")+"&rssfeed[item_date]="+(a.rssfeed_item_date?a.rssfeed_item_date:"")+"&rssfeed[item_description]="+(a.rssfeed_item_description?a.rssfeed_item_description:"")+"&rssfeed[item_description_length]="+(a.rssfeed_item_description_length?a.rssfeed_item_description_length:"")+"&rssfeed[item_description_color]="+(a.rssfeed_item_description_color?encodeURIComponent(a.rssfeed_item_description_color):"")+"&rssfeed[item_description_link_color]="+(a.rssfeed_item_description_link_color?encodeURIComponent(a.rssfeed_item_description_link_color):"")+"&rssfeed[item_description_tag]="+(a.rssfeed_item_description_tag?a.rssfeed_item_description_tag:"")+"&rssfeed[no_items]="+(a.rssfeed_no_items?a.rssfeed_no_items:"")+"&rssfeed[cache]="+(a.rssfeed_cache?a.rssfeed_cache:"");
if(a.rssfeed_border!="off"&&!a.rssfeed_css_url){}
document.write('<iframe name="rssfeed_frame" width="'+a.rssfeed_frame_width+'" height="'+a.rssfeed_frame_height+'" frameborder="0" src="'+c+'" marginwidth="0" marginheight="0" vspace="0" hspace="0" scrolling="no" ALLOWTRANSPARENCY="true"></iframe>')
})()

现在唯一的问题是我不知道如何调用该函数。我有另一个函数被调用，因为我有onClick="example()"，这很好，但 RSS 提要需要自动加载。我不想点击按钮来显示提要。

Answer 1

函数只有在你调用它们时才会运行。因此，您可以拥有一个 JS 文件，其中包含一个 HTML 文件永远不会调用的函数，并且不会出错——它们对页面的功能没有影响。额外未使用代码的唯一缺点是加载时间更长，但在文件变得非常大之前这并不重要。

Answer 2

您可以拥有一个名为“common.js”的文件，其中包含所有相关的 JavaScript 功能。但是您将需要单独的 JavaScript（在单独的文件中或嵌入在 HTML 页面本身中）以根据不同页面的需要具体使用通用功能。

看了一些代码，或许能提供更好的答案。

Answer 3

在适当的地方将您的 javascript 代码拆分为多个文件更合乎逻辑。但是，如果您将代码放入函数中，即使它链接到您的 html 页面，您也不必在您的 javascript 文件中运行任何代码。

function myFunction()
{
    // do something.
}

除非您在 html 中调用，否则此函数中的代码不会运行。

<body onload="myFunction()">
  ...
</body>

Answer 4

我认为您可以这样做，例如通过将 id 或 class 添加到 html 或 body，然后编写条件，如果元素（html 或 body）包含 id/class 则执行适当的功能。 什么时候调用函数？在页面加载？ 如果提供示例代码就更好了。