Question

请帮助我，我已经卡在这里，我不知道这将是如何可行的。我想在javascript中包含一个脚本，其中我只需要将我包含的脚本放在变量中。

这是我想要包含的include.js的代码：

[{
            "name": "Carrascal",
            "path": "M116,-978,109,-983,111,-986,111,-994,88,-972,28,-912,0,-883,1,-871,5,-864,5,-854,2,-829,3,-824,27,-836,39,-841,52,-846,63,-850,76,-857,95,-866,109,-874,122,-876,130,-877,132,-882,132,-900,132,-907,136,-912,141,-916,150,-917,153,-922,157,-924,155,-932,161,-937,166,-938,168,-934,171,-934,173,-940,177,-944,179,-948,176,-953,170,-955,167,-954,161,-949,157,-946,151,-942,146,-934,138,-926,132,-919,123,-916,114,-926,104,-934,99,-941,95,-947,101,-950,111,-953,115,-957,126,-955,136,-961,136,-966,132,-970,137,-976,136,-984,132,-985,126,-980,127,-972,128,-965,124,-961z"
        }

    ]

这里是.js的代码，它将调用include.js并设置为变量。

data = $.getScript('../mapdata/include.js');

我希望输出结果如下：

data = [{
            "name": "Carrascal",
            "path": "M116,-978,109,-983,111,-986,111,-994,88,-972,28,-912,0,-883,1,-871,5,-864,5,-854,2,-829,3,-824,27,-836,39,-841,52,-846,63,-850,76,-857,95,-866,109,-874,122,-876,130,-877,132,-882,132,-900,132,-907,136,-912,141,-916,150,-917,153,-922,157,-924,155,-932,161,-937,166,-938,168,-934,171,-934,173,-940,177,-944,179,-948,176,-953,170,-955,167,-954,161,-949,157,-946,151,-942,146,-934,138,-926,132,-919,123,-916,114,-926,104,-934,99,-941,95,-947,101,-950,111,-953,115,-957,126,-955,136,-961,136,-966,132,-970,137,-976,136,-984,132,-985,126,-980,127,-972,128,-965,124,-961z"
        },

    ];

请帮助我谢谢..

Answer 1

不仅可以加载javascript，还可以是通用的加载器。试试这个：

    <script>
    function include(htmlcontent, toEl, mode){
    toEl = toEl||"head";
    //mode: append = 0, insert = 1, insertAfter =2, insertBefore = 3;
    mode = mode || 0;
    var docElement = (toEl == "html"||toEl == "head"||toEl == "body")? docElement = document.getElementsByTagName(toEl)[0] : docElement = toEl
    var ContHtmlFrag;
    switch (true){
      case htmlcontent == null : 
        alert(new TypeError('The htmlcontent must be filled in'));break;
      case htmlcontent.length == 1 : 
        ContHtmlFrag = document.createRange().createContextualFragment(htmlcontent[0]);break;
      case htmlcontent.length >1 : 
        ContHtmlFrag = document.createRange().createContextualFragment(htmlcontent);break
    }    
    switch (mode){
      case 0 : docElement.appendChild(ContHtmlFrag);break;
      case 1 : docElement.parentNode.insertBefore(ContHtmlFrag, docElement);break;
      case 2 : docElement.parentNode.insertBefore(ContHtmlFrag, docElement.nextSibling);break;
      case 3 : docElement.parentNode.insertBefore(ContHtmlFrag, docElement.previousSibling);break;
      default:;break;
    }
  };
  /* *********************************** */
  /* Examples of its use                 */
  /* Examples of calling js or css files */
    var cvsCss = "https://aerotwist.com/css/aerotwist.css",
        mnCss  = "http://asciimath.org/css/screen.css",
        cmJs  = "https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js",
        cvsJs = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML-full",
        mnJs = "https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.js",
        icon = "https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico",
        stySht = "stylesheet";

    var tpl_css = function(cont){return `<link href=${cont} rel=${stySht} \/>`} 
    var tpl_ico = function(cont){return `<link href=${cont} rel="shortcut icon" \/>`} 
    var tpl_scr = function(cont){return `<script src=${cont}><\/script>`} 
    include([
      tpl_css(cvsCss),
      tpl_css(mnCss),
      tpl_scr(cmJs),
      tpl_scr(cvsJs),
      tpl_scr(mnJs),
      tpl_ico(icon)
    ],"head");

    /*Example of filling html in element*/
    include([`<div id=\'test\'>
        <div id='A'>  Hello A
           <div id='a'>Hello a</div>
           <div id='b'>Hello b</div>
        </div>
        <div id='B'>Hello B
          <div id='1'>Hello 1</div>
          <div id='2'>Hello 2</div>
        </div>
        <div id='C'>Hello C
          <div id='test1'>Hello 1</div>
          <div id='test2'>Hello 2</div>
        </div>
        <div id='D'>Hello D</div>
    </div>
    `],'body');
    include(['<div>HALLO</div>'],document.getElementById('1'),3);
    include(['<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"><\/script>'],document.getElementById('1'),3);

</script>

Answer 2

Javascript并不一定像其他语言一样具有包含功能。如果您在浏览器中运行javascript，则可以使用脚本标记或ajax包含其他脚本。

这里有很好的答案：How do I include a JavaScript file in another JavaScript file?

如何在javascript中包含脚本

2 个答案: