weixin_33713707 2018-07-18 01:17 采纳率: 0%
浏览 48

为什么脚本不执行？

I'm trying to make a web app that refreshes its content, its styles and scripts using AJAX, so the site updates everything without reloading the page.

So what happens is that I get the page first of all and when it loads I use ajax to make a request to the server and get the html content then another request to get the styles and finally another request to get the script and put it inside a script tag

<script> //The script goes here </script>

then, I put the script tag at the end of the html content and update the body completely with the content

<body>
  The HTML content goes here
  <script> //and here is the script </script>
</body>

The requests are successful and the content loads and so the styles and when I use the browser inspector tool I can see the script loaded inside the script tag but the script doesn't execute.

This was an overview of the question, you can see the code here https://codepen.io/Yousef-Essam/project/editor/ZJGxea

app.js serves the index.html file and then the index file gets the script.js file which sends two requests with ajax to get the content.html file and content.js file and sets the href attribute of the link tag to the style file. The content.js file then is put inside a script tag with the new content. Although the content.html loaded and the style file as well and the script loads in the script tag, the script isn't executed.

Why did that happen and how can I fix it?

--Update--

The problem may be really in using the innerHTML but why doesn't it really work.

Also, I think that eval may be a solution but I want a better solution as using eval is discouraged

  • 写回答

2条回答 默认 最新

  • ?Briella 2018-07-18 02:28
    关注

    The HTML specification dis-allows parsing SCRIPT elements dynamically added as HTML tags after page load using innerHTML (as per the note under the text property description in the living standard).

    SO answers to similar questions without using eval to parse the script were not apparent in a simple search - while they may exist, I've only seen alternative techniques presented off-site.

    Here's a dynamic loader that doesn't use eval. Because loading the script is asynchronous it uses a callback function of the (err, data) type to signal when the script can be called.

    function loadScript( url, callback) {
    var el = document.createElement("SCRIPT");
    el.type = "text/javascript";
    function finish( err) {
        callback( err, err ? false : true);
    }
    el.onerror = finish;
    if( el.readyState){  // <= IE 10
        el.onreadystatechange = function(){
            if( this.readyState == "complete"){
                finish( null);
            }
        };
    }
    else { 
        el.onload = function() { finish(null) };
    }
    el.setAttribute("async", true);
    el.src = url;
    document.getElementsByTagName("HEAD")[0].appendChild( el);
} 

// example call to load jQuery 3.2.1         

loadScript( "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js",
   function (err, ok) {
       if( err) {
           console.log( "loading failed: " + err);
        }
        else {
         console.log( "loading success");
        }
    }
);
    评论

报告相同问题？

悬赏问题

  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘