Javascript 如何调用函数来运行特定代码？

我让我的网站移动友好，我加载不同的CSS文件的基础上，如果用户使用触摸设备或没有。我编辑了这个问题，而是创建了一个警告框来简化问题

请注意：

LoadCSS（style.css）

已更改为

alert（）

我想运行存储在变量中的javascript代码

根据我的研究，eval（variable）以代码的形式运行/执行变量，但这不起作用

我要运行的代码存储在“iTouchScreen”和“notTouchscreen”中

--isTouchscreen.js--

--index.html--[编辑为使用“警报”]

如果触摸屏（“警报（‘触摸屏设备！'）”，“警报（‘非触摸屏设备！'）”）

如果用户使用触摸屏设备，“isTouchscreen”变量将作为javascript代码运行，如果用户不使用触摸屏设备，“notTouchscreen”变量将作为javascript代码运行

我期望一个“警报”会发生，但不会发生

---

如何使用变量/条件[function（variable/condition）]在javascript中调用函数，并使函数以javascript代码的形式执行所述变量/条件？

发生的情况是，这两个函数都是在调用

ifTouchScreen

之前执行的

必须在其周围添加引号：

ifTouchscreen("LoadCSS('mobile-friendly.css')", "LoadCSS('normal.css')")

---

我也可能误解了

LoadCSS

实际上是以文本形式返回javascript代码

在当前代码中，

LoadCSS（…）

将被调用两次，并且从这些调用返回的值（可能是

未定义的

）将作为参数传递给函数

有可能像这样的东西会起作用：

   ifTouchscreen("LoadCSS('mobile-friendly.css')", "LoadCSS('normal.css')")

但您真正想要做的是传入一个

函数

，作为代码调用的“回调”

ifTouchscreen(() => LoadCSS('mobile-friendly.css'), () => LoadCSS('normal.css'))

---

您可以动态加载css，如下所示：

function loadCssDynamically(href){
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = href;
    link.media = 'all';
    head.appendChild(link);
}

function ifTouchscreen(isTouchscreenHref, notTouchscreenHref) {
  if(userIsUsingATouchScreen) { 
    loadCssDynamically(isTouchscreenHref)
  } else {
    loadCssDynamically(notTouchscreenHref);
  }
}

ifTouchscreen('http://website.com/css/stylesheet1.css', 'http://website.com/css/stylesheet2.css')

---

iTouchScreen

和

notTouchScreen

内有什么？请将代码添加到问题中。每个变量的代码分别为

LoadCSS（'mobile-friendly.css'）

和

LoadCSS（'normal.css'）

，如“index.html”所示。我相信我创建的函数是正确的，我是javascript新手。是的，我对

LoadCSS

的主体更感兴趣，如果我不清楚的话，很抱歉，但我想实际的问题是下面的答案。你不应该为不同的设备加载不同的CSS。媒体查询和响应性设计原则解决了您面临的问题。

ifTouchscreen(() => LoadCSS('mobile-friendly.css'), () => LoadCSS('normal.css'))

function ifTouchscreen(isTouchscreen, notTouchscreen) {

  if(userIsUsingATouchScreen) { 
    isTouchScreen();
  } else {
    notTouchScreen();
  }
}

function loadCssDynamically(href){
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = href;
    link.media = 'all';
    head.appendChild(link);
}

function ifTouchscreen(isTouchscreenHref, notTouchscreenHref) {
  if(userIsUsingATouchScreen) { 
    loadCssDynamically(isTouchscreenHref)
  } else {
    loadCssDynamically(notTouchscreenHref);
  }
}

ifTouchscreen('http://website.com/css/stylesheet1.css', 'http://website.com/css/stylesheet2.css')