2

我有 3 个 JavaScript 文件，我想从一个index.html文件中加载它们。我通过使用if我只知道如何在 JavasSript 中执行的语句在其中进行选择。但是，当在 JavaScript 正文中时，看起来我不能这样说：

<script type="text/javascript">
if(window.innerHeight == 800)
     <script type="text/javascript" charset="utf-8" src="storybook.js"></script>

在条件之后是否有一个函数或其他东西可以用来执行 JavaScript 文件？

4

4 回答 4

4

更新

当我最初写这个答案时，情况已经发生了变化，但它们继续变化到这个答案并没有过时的地步。请参阅2014 年响应式网页设计指南，因为现在有多种方法可以在样式表中使用媒体查询来获得您正在寻找的响应式布局。Foundation和Bootstrap等框架现在提供响应式布局，并为您处理大量繁重的工作，因此您可以花时间设计您的网站，而不是编写它的管道。

原始答案

有几种方法，但这里有一种（动态加载外部 JavaScript 或 CSS 文件，由 Google 搜索“动态加载 javascript”找到）：

function loadjsfile(filename){
   var fileref = document.createElement('script');
   fileref.setAttribute('type', 'text/javascript');
   fileref.setAttribute('src', filename);
   if (typeof fileref !== 'undefined') {
      document.getElementsByTagName('head')[0].appendChild(fileref);
   }
}

loadjsfile("storybook.js"); //dynamically load and add this .js file

另一种方法是，不是动态加载文件，而是将所需的所有内容加载到一个文件中。然后，调用正确的脚本。虽然这可能会因为加载整个文件而受到批评，但如果您的用户更改他的屏幕尺寸会发生什么？也许您希望加载这两个资源。改变屏幕尺寸并不像人们调整窗口大小那样牵强，甚至将窗口移动到具有不同分辨率的不同显示器上。

// storybook800.js
function for800() {
   return {
      // all your module's stuff
   };
};

// storybook1600.js
function for1600() {
   return {
      // all your module's stuff
   };
};

// main document
var storybook;
if (window.innerHeight === 800) {
   storybook = for800();
} elseif (window.innerHeight === 1600) {
   storybook = for1600();
}

但是，我真的不推荐其中任何一个选项。维护单独的文件可能会遇到真正的问题。无需加载完全不同的文件，只需在您的代码中检测即可。传入window.innerHeight参数或更好，只需在您的 javascript 文件中检测它：

//storybook.js
function mystorybook() {
   if (window.innerHeight === 800) {
      //do something appropriate.
   }
};

如果这看起来很痛苦，请添加一些辅助函数。例如，创建一个函数，该函数期望具有各种键的对象，这些键包含依赖于大小的函数，以针对不同的大小运行。它可能被称为这样的东西：

doSomethingSizeSensitive({
   800: function() {
   },
   1024: function() {
   },
   1600: function() {
   }
});

然后，您可以在该函数中编写代码，根据当前屏幕尺寸和传入的对象键，最好地选择正确的结果。它可以返回您传入的适当函数或值，而不是doSomethingSizeSensitive实际运行函数，然后您可以使用或存储它们：

var myaction = getSizeSensitiveFunction({
   800: function() {
   },
   1024: function() {
   },
   1600: function() {
   }
});
myaction(); // for the rest of the lifecycle of the page, it does the right thing.

你可以让你的函数返回任何东西——不仅仅是函数，还有值。如果屏幕尺寸是 1280 或 1528 或其他一些奇怪的尺寸怎么办？您需要智能地选择功能。考虑如何抽象出必须不同的部分，通过将其编码在对象中或检测从其他代码调用的风格函数中，以便您的代码的其余部分都可以相同。

也许你应该有一个完整的设置对象：

sizedata = {
   800: {
      something1: function() {},
      value1: 'small'
   },
   1600: {
      something2: function() {},
      value2: 'large'
   },
};

结合正确选择正确sizedata子对象的功能，现在您可以随时调整某些内容或添加新的屏幕尺寸。这一切都在一个地方！当需要修理或维护时，您就像在天堂一样。

于 2013-01-08T04:27:39.500 回答
1

通过将脚本附加到文档。

if(window.innerHeight == 800){
    var script = document.createElement("script");
    script.src = "storybook.js";
    document.getElementsByTagName("head")[0].appendChild(script);
}
于 2013-01-08T04:26:07.163 回答
0 
var s = document.createElement("script");
s.src="myscript.js";
document.head.appendChild(s);

哦，伙计，同时有这么多相同的答案。

于 2013-01-08T04:29:35.397 回答
0

我是 javascript 新手，但我有一个想法，您可以将 id 设置为，<header id='h'></header>然后您可以使用以下代码将脚本附加到标头：

var h = document.getElementById('h');
var scripts = document.createElement('script');
switch(window.innerHeight){
    case 800:
      scripts.src = 'storybook.js';
      scripts.type = 'text/javascript';
      break;
}
h.appendChild(scripts);

您可以通过添加更多案例来更改脚本源。谢谢阅读。

于 2013-01-08T04:49:39.627 回答