简体   繁体   English

为什么我的外部javascript方法说它是未定义的?

[英]Why is my external javascript method saying it is undefined?

I have this external method that will load the correct CSS file depending on screen size which works. 我有这个外部方法,它将根据工作的屏幕大小加载正确的CSS文件。 When I added more folders/pages I realized I need to specify how many folders deep when I'm calling it so it can find the CSS files. 当我添加更多文件夹/页面时,我意识到我需要在调用它时指定多少个文件夹,以便它可以找到CSS文件。 It works on the pages that are one folder deep which just has 1 line of text to make sure it is loaded. 它可以在一个文件夹深的页面上工作,该文件夹只有一行文本以确保已加载。 When I try to load the index page which has pictures and stuff it loads everything except the CSS file saying "ReferenceError: Start is not defined". 当我尝试加载包含图片和其他内容的索引页时,它将加载除CSS文件外的所有内容,该文件显示“ ReferenceError:未定义启动”。 Why is it not defined? 为什么未定义? Please keep all solutions strictly to javascript, I don't want to use jQuery for this project. 请严格保留所有解决方案使用javascript的方法,我不想在该项目中使用jQuery。

Here is the HTML this is in the head tag 这是head标签中的HTML

<script src="../Scripts/Load_CSS_Template.js"></script>
<script>Start(0);</script>

Here is the external javascript 这是外部javascript

function Start(Folders_Deep)
{ 

    if (Folders_Deep == "undefined")
    {
        console.log("I was not defined");
    }
    else
    {
        var Prefix = "";

        if(Folders_Deep == 1)
        {
            Prefix = "../";
        } 

        console.log("Browser Screen Width: " + window.innerWidth);
        console.log("Hostname: " + window.location.hostname);
        console.log("Folders_Deep: " + Folders_Deep);
        console.log("Prefix: " + Prefix);

        if (window.innerWidth <= '1400')
        {
            Get_CSS_File(Prefix + 'Mobile_Template.css'); 
        }
        else 
        { 
            Get_CSS_File(Prefix + 'Desktop_Template.css'); 
        }
    }
}

If your CSS files are always in the root directory and the JavaScript is always in the directory /Scripts you don't need no prefix, just use the full paths /Scripts/Load_CSS_Template.js , /Mobile_Template.css , and /Desktop_Template.css . 如果你的CSS文件始终在根目录和JavaScript始终是在目录/Scripts ,你不需要任何前缀,只需使用的完整路径/Scripts/Load_CSS_Template.js/Mobile_Template.css/Desktop_Template.css Otherwise use window.location to find out where you are and act accordingly. 否则,请使用window.location找出您所在的位置并采取相应措施。

function Start(Folders_Deep) {
    var Prefix = "";

    if (undefined === Folders_Deep) {
        console.log("I was not defined");
    } else {
        if (Folders_Deep == 1) {
            Prefix = "../";
        } else if (Folders_Deep == 0) {
            Prefix = "./";
        }

        console.log("Browser Screen Width: " + window.innerWidth);
        console.log("Hostname: " + window.location.href);
        console.log("Folders_Deep: " + Folders_Deep);
        console.log("Prefix: " + Prefix);

        if (window.innerWidth <= '1400') {
            Get_CSS_File(Prefix + 'Mobile_Template.css');
        } else {
            Get_CSS_File(Prefix + 'Desktop_Template.css');
        }
    }
}

Ok. 好。 Try this instead. 试试这个吧。

Add this to the <head> section in your html file: 将其添加到html文件的<head>部分:

<script type="text/javascript">

function getScript(src, callback) {
  var s = document.createElement('script');
  s.src = src;
  s.async = true;
  s.onreadystatechange = s.onload = function() {
    if (!callback.done && (!s.readyState || /loaded|complete/.test(s.readyState))) {
      callback.done = true;
      callback();
    }
  };
  document.querySelector('head').appendChild(s);
}

function myCallback() { Start(0); }

getScript("../Scripts/Load_CSS_Template.js", myCallback);

</script>

If you just want the function to be executed when the file is loaded (not taking loading of other files and objects into account), you can simply place the Start(0) call below the function in Load_CSS_Template.js 如果只想在加载文件时执行该函数(不考虑其他文件和对象的加载),则只需在Load_CSS_Template.js中的函数下方放置Start(0)调用即可。

Ie

function Start(Folders_Deep)
{ 

    if (Folders_Deep == "undefined")
    {
        console.log("I was not defined");
    }
    else
    {
        var Prefix = "";

        if(Folders_Deep == 1)
        {
            Prefix = "../";
        } 

        console.log("Browser Screen Width: " + window.innerWidth);
        console.log("Hostname: " + window.location.hostname);
        console.log("Folders_Deep: " + Folders_Deep);
        console.log("Prefix: " + Prefix);

        if (window.innerWidth <= '1400')
        {
            Get_CSS_File(Prefix + 'Mobile_Template.css'); 
        }
        else 
        { 
            Get_CSS_File(Prefix + 'Desktop_Template.css'); 
        }
    }
}

Start(0);

-------------------- [ ALTERNATIVE SOLUTION ] ----------------------- -------------------- [替代解决方案] -----------------------

Instead, put Start(0) in <body onLoad=""> and it will be executed once everything is loaded. 而是将Start(0)放在<body onLoad=""> ,一旦所有内容加载完毕,它将被执行。 (Leave the script loading as-is in the html <head> section.) (在html <head>部分中按原样加载脚本。)

Ie

<body onLoad="Start(0)">Hello World</body>

It was the ../ in the call to load the js file. 加载js文件的调用中是../。 I forgot I copied and pasted from the page that is inside a folder. 我忘了从文件夹内的页面复制和粘贴。 Once I removed that it loaded the script. 一旦删除,它便加载了脚本。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM