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

Question

我想在外部 Javascript 文件中使用函数链接到我的每个 html 文件。 但是，我希望某些函数链接到一个 html 文件，而其他函数将链接到另一个 html 文件。 我需要多个 Javascript 文件还是可以将它们压缩成一个文件？ 当我尝试使用一个 Javascript 文件时，每个 function 都会在我的每个页面上运行。 有没有办法在没有完整代码的情况下调用 html 中的特定 function？ 与 css 一样，使用#example作为 html 中的 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 提要，但 function 旁边没有任何内容。

html 文件链接到 Javascript 文件，因为 function 是空白的，它会自动运行，或者这就是我假设的。

(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>')
})()

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

Answer 1

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

Answer 2

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

看到一些代码后，人们可以提供更好的答案。

Answer 3

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

function myFunction()
{
    // do something.
}

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

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

Answer 4

我认为你可以这样做，例如通过向html或body添加id或类，然后编写条件，如果元素（html或body）包含id / class执行相应的函数。 这些函数何时被调用？ 在页面加载？ 如果您提供示例代码，那就更好了。

Answer 5

您可以使用 location.pathname 并检查路径并使用 switch 或者 if else