如何将编译后的 JavaScript 代码放入我的 HTML 页面？答案

【问题标题】：How do I put compiled JavaScript Code into my HTML Page?如何将编译后的 JavaScript 代码放入我的 HTML 页面？
【发布时间】：2014-01-28 08:17:29
【问题描述】：

谁能告诉我如何/在哪里将此代码放在基本的 html 页面中：

var autoSizeText;
autoSizeText = function() {
  var el, elements, _i, _len, _results;
  elements = $('.resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
        return $(el).css('font-size', elNewFontSize);
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
      return _results1;
    })(el));
  }
  return _results;
};

我从这个链接获得了代码：Here. 我正在尝试使用 Javascript Compiled 代码部分，因为我根本不知道如何使用 CoffeeScript。

谢谢大家。

其他信息：到目前为止，我已经尝试将编译后的代码放在结束正文标记之前，并将代码放入脚本标记中，但它仍然无法正常工作。我正在尝试使用该代码，因为我在响应式 div 中有文本（即：div containstext { width: 80%; height:20%; }）我想响应。另外，我尝试使用 FitText 并没有解决我的问题（文本仍然从包含的 div 溢出，文本对我的响应不够；我知道我可以使用溢出样式使文本不溢出，但是我不是在寻找滚动条）。

编辑：我已将代码放入脚本标签中，就在结束正文标签之前。我也放了

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

在我的头标签中。

【问题讨论】：

autoSizeText 是一个function，你需要调用函数autoSizeText(); - 你也需要jQuery。
它看起来需要一个查询选择器引擎，你有 zepto 或 jQuery 加载吗？
如何加载 zepto？我加载了 Jquery，但这似乎不起作用。此外，看起来 autosizetext 已经被声明为函数？如果我错了，我该怎么做？
是的，它已被声明为function，但它不是called/ instantiated ;-)
另外，顺便提一下，如果您直接从file:/// 运行文件，则使用与协议无关的src="// 将不起作用 - 您需要在加载jQuery 时指定http://

标签： javascript html css coffeescript

【解决方案1】：

把这个脚本放到一个文件中，以 myScript.js 结尾（最好放在一个名为 js 的文件夹中）

在您的 HTML 代码中

通过

链接myScript.js

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

在 html 中，如果脚本在 js 文件夹中。

【讨论】：

【解决方案2】：

当您将代码放在结束正文标记之前时，您是否将代码放在脚本标记中？放置在正文中时，浏览器仍然需要知道它是 javascript。

如果将代码放在 head 标签中，那么在运行代码时 .resize 元素还不存在。如果您将其放在页面正文末尾的脚本标记中，则所有内容都已加载并且代码应该可以正常工作，并且会出现编码错误。

此外，您正在调用 jQuery，因此您需要在 head 标签中添加以下脚本以引用 jQuery。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

最后但同样重要的是，确保调用 autoSizeText();在现有代码之后。

【讨论】：

【解决方案3】：

只需使用script 标签：

选项 1：

<html>
<head>
  <script>
    var autoSizeText;
    ...
      return _results;
    };  
  </script>
...
</head>
<body>
...
</body>

选项 2（推荐）。将js代码保存到js文件中，例如someScript.js，然后像这样加载：

<html>
<head>
  <script src="someScript.js"></script>
  ...
</head>
<body>
...
</body>

src 中指定的路径是相对于您的.html 文件的，在此示例中，两个文件都在同一个目录中。例如，如果将 js 保存在 scripts 文件夹中，则路径将为 src="scripts/someScript.js"

干杯

【讨论】：

【解决方案4】：

将脚本放在页眉或页脚的<script></script> 标记内。还要在</script>标签之前添加以下内容。

 $(document).ready -> autoSizeText()

jquery$(document).ready(function()以上需要修改。

例如小提琴here。

【讨论】：

【解决方案5】：

HTML

<div class="container">
    <div class="no-resize">This text won't be resized and will go out of the div.</div>
    <div class="resize">hout of the div.</div>
</div>

Javascript

<script>

var autoSizeText;
autoSizeText = function() {
  var el, elements, _i, _len, _results;
  elements = $('.resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
        return $(el).css('font-size', elNewFontSize);
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
      return _results1;
    })(el));
  }
  return _results;
};

autoSizeText(); // here is where we call the function.

</script>

CSS

<style>
    .no-resize, .resize {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    color: #000;
    float: left;
    margin-left: 10px;
    font-size: 15px
}
</style>

另外，请确保您也加载了jQuery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

【讨论】：

干得好，我认为这是我忘记获取源的 Jquery，并在最后调用了该函数。谢谢。
你应该给他一些关于网页结构的基本教程。

【解决方案6】：

这里有几个问题。

第一

代码只创建一个函数。您还需要调用该函数：

autoSizeText();

第二

代码正在寻找具有响应类的元素。您提到的 div 有一个包含文本的 div 类。您将需要更改 div 的类或代码。

【讨论】：