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

我想从

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>

如果（window.innerHeight==800）

---

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

将脚本附加到文档中

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

---

通过将脚本附加到文档

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

---

更新

当我最初写下这个答案时，情况已经发生了变化，但它们一直在变化，直到这个答案不再过时。请咨询，因为现在有很多方法可以在样式表中使用媒体查询来获得您想要的响应性布局。像和现在这样的框架提供了响应性的布局，并为您处理了大量繁重的工作，所以您可以花时间设计站点，而不是对其管道进行编码

原始答案

有几种方法，但这里有一种（来自，由谷歌搜索“动态加载javascript”找到）：

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

// 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();
}

但是，我并不真正推荐这两个选项。维护单独的文件可能会有很大的问题。不要加载完全不同的文件，只需在代码中进行检测即可。传入

窗口。innerHeight

参数或更好，只需在javascript文件中检测它：

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

如果这看起来很痛苦，可以添加一些辅助函数。例如，创建一个函数，该函数要求具有不同键的对象以不同的大小运行，这些键包含与大小相关的函数。可以这样称呼：

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

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

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

子对象的功能相结合，现在您可以随时调整某些内容或添加新的屏幕大小。都在一个地方！当需要修复或维护时，你就在天堂了。

更新

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

当我最初写下这个答案时，情况已经发生了变化，但它们一直在变化，直到这个答案不再过时。请咨询，因为现在有很多方法可以在样式表中使用媒体查询来获得您想要的响应性布局。像和现在这样的框架提供了响应性的布局，并为您处理了大量繁重的工作，所以您可以花时间设计站点，而不是对其管道进行编码

原始答案

有几种方法，但这里有一种（来自，由谷歌搜索“动态加载javascript”找到）：

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

// 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();
}

但是，我并不真正推荐这两个选项。维护单独的文件可能会有很大的问题。不要加载完全不同的文件，只需在代码中进行检测即可。传入

窗口。innerHeight

参数或更好，只需在javascript文件中检测它：

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

如果这看起来很痛苦，可以添加一些辅助函数。例如，创建一个函数，该函数要求具有不同键的对象以不同的大小运行，这些键包含与大小相关的函数。可以这样称呼：

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

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

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

子对象的函数相结合，现在您可以随时选择黄金形状