脚本“src”标签问题答案

【问题标题】：script "src" tag issues脚本“src”标签问题
【发布时间】：2012-03-13 18:21:47
【问题描述】：

我在页面中嵌入了一个脚本，如下：

<script type="text/javascript">

function fireNlPopup()
{
    setOpacity(0);
    centre();
    document.getElementById("NlPopup").style.display = "block";
    fadeInNlPopup();
}

//Other functions here

</script>

这会使以下内容在窗口中显示为弹出窗口：

<div id='NlPopup' name='NlPopup' class='nl'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutNlPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
Your next lecture is X, with Y, at Z.
</td></tr>
</table>
</div>

最后，这一切都由一个按钮调用：

<button type="button" style="button" onClick="fireNlPopup()">Next Lecture</button>

问题是当我尝试将脚本放入不同的文件时。我有一个名为 popup.js 的文件，其代码完全相同（因为它在嵌入到我的 php 文件中时可以工作，所以我假设如果我将它复制到一个 js 文件中并调用它，它就会工作。

当我调用 js 文件时，我使用：

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

然后脚本标签之间的所有内容都进入popup.js。然而，尽管代码在嵌入时工作正常，但第二次我将其取出并放入自己的文件中，它不起作用。我进行了两次和三次检查，我的代码工作正常，语法正确，这就是为什么我把它省略了代码 sn-p。由于某种原因，它只是停止工作。我是否错误地调用了文件？它在我的服务器上，我也检查过=P

我可能真的很愚蠢，但任何帮助都会非常有用。多年来我一直坚持这一点。

谢谢 =)

编辑：对于那些想要看的人，页面在这里：http://oliverlea.com/3yp/tt.php

此外，使用 Chrome 查看源代码时，文件确实会作为链接加载。

感谢您的帮助 =)

编辑 2：

首先，是的，脚本标签在我的文件头部。

第二：好的，所以无论我使用 src="popup.js" "/popup.js" 还是 "./popup.js" 我什么都得不到。 url 总是加载在 Chrome 的源代码查看器中，即使将文件的权限更改为 0755，它仍然没有任何区别。

我完全被这个弄糊涂了。

【问题讨论】：

尝试在 Chrome 中查看该站点并查看该页面的源代码。 Chrome 会将script 的src 设为链接，以便您可以点击它。看看它是否加载你的脚本。如果不是，那么它没有指向正确的位置。或者，只需将 popup.js 放在 URL 的末尾，看看它是否加载。
如果您的“popup.js”脚本至少已加载，请首先检查 firebug。
+1 表示使用“flummoxed”这个词。请参阅我的回答以了解您的问题的解决方案。

标签： javascript include src

【解决方案1】：

脚本需要被解析才能被引用。这是竞态条件的经典案例。如果您要像这样在 DOM 中引用它，请确保该脚本位于 <head> 中。还要确保您的src="/path/to/popup.js"中的路径正确

【讨论】：

【解决方案2】：

这是 popup.js 文件的编码问题。请看下面我的分析。某些浏览器会为您“修复”此问题，而其他浏览器则不会。解决方法是将 popup.js 文件保存为标准编码，在 Windows 机器上尝试保存在记事本中。

编辑：添加摘要（上图）。您的问题的完整分析如下：

您的页面在 IE9 中有效，但在 Chrome 或 Firefox 中无效。此外，我将页面和您的 CSS 和 JS（但不是图像）复制到本地项目中，它也适用于我（即使在 chrome 和 Firefox 中）。

然后我将您的实时页面加载到 FireFox 并打开 FireBug，当我单击“Next Lecture”时，控制台显示 FireNlPopup 未定义。

经过进一步审查，我在您的实时页面上查看了 FireFox 中的源代码，然后单击了“popup.js” 结果如下所示：

您似乎正在使用某种文本编辑器来创建您的 popup.js 文件，该文件以一种奇怪的格式进行编码；使用标准的记事本或记事本++，（即不是写字板）或使用 Eclipse 或 Visual Studio 保存 popup.js 文件，你应该很好。

【讨论】：

可能在他的 ftp 应用中以二进制模式上传
是的，可能是这样，但他没有提到它是否在本地工作，而不是在上传到托管服务提供商时。
天哪，我爱你。事实证明，不仅 WinSCP 将其作为二进制文件上传（我已修复），TextPad（我选择的编辑器）还区分了 Unicode 和 UTF-8。将其从 Unicode 更改为 UTF-8 解决了这个问题。非常感谢！

【解决方案3】：

尝试使用：

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

或者如果这不起作用：

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

可能是找不到路径，但是使用Firebug或者Chrome的控制台应该可以告诉你。

【讨论】：

【解决方案4】：

我有不同的原因，但症状相同。本质上，我没有连接服务器上的脚本文件，需要添加到路由表才能检索它。事后看来有点愚蠢，但我可能会为别人节省一些时间。

FWIW，我添加了（使用 node.js）；

// script routes
app.get('/scripts/:script',                  script_server.serve);

在 script_server.js 中

exports.serve = function(req, res){
  res.sendfile(req.param('script'));
};

【讨论】：