Question

我想从index.html文件中加载3个JavaScript文件。我在其中选择使用if语句，我只知道如何在JavasSript中做。但是，当在JavaScript体中时，它看起来不像我可以说：

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

是否有一个函数或某些东西可用于在条件后执行JavaScript文件？

Answer 1

<强>更新

当我最初写这个答案时，事情已经发生了变化，但是他们继续改变到这个答案没有多少过时的地步。请参阅The 2014 Guide to Responsive Web Design，因为现在有办法在样式表中使用媒体查询来获取您正在寻找的响应式布局。像Foundation和Bootstrap这样的框架现在可以提供响应式布局，并为您处理繁重的工作，因此您可以花时间设计网站而不是编写管道。

原始回答

有几种方法，但这里有一个（来自dynamically loading an external JavaScript or CSS file，由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子对象的功能，现在您可以随时调整某些内容或添加新的屏幕尺寸。这一切都在一个地方！当你需要修理或维护时，你就在天堂。

Answer 2

将脚本附加到文档中。

if(window.innerHeight == 800){
    var script = document.createElement("script");
    script.src = "storybook.js";
    document.getElementsByTagName("head")[0].appendChild(script);
}

Answer 3

var s = document.createElement("script");
s.src="myscript.js";
document.head.appendChild(s);

哦，伙计，同时也有很多答案。

Answer 4

我是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);

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

如何从javascript中有选择地运行/加载单独的javascript文件？

4 个答案: