how to block the page width javascript

Question

...
<head>
    <script type="text/javascript" src="a.js"></script>
</head>
<body>
    <button id="test">click me</button>
    <script type="text/javascript">
        show();
        document.getElementById('test').onclick=function(){
            show();
        }
    </script>
</body>
</html>

the code above:

I put the a.js in the <head> tag, in a.js there's a b.js created by

document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));  function show(){...}

in b.js;

now I want to invoke show() which in the b.js，but it goes error,because b.js hasn't loaded;

I want to add some codes to block the page loading.

while(){} ?

actually,I learned b.js should be loaded when function show is invoked;

but what about click event?in addition,I must put the show() in the page.

now,I put another js(base.js) into head tag,the above code will be like this:

...
<head>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
    <button id="test"></button>
    <script type="text/javascript">
        //invoke button click event from base.js and b.js
    </script>
</body>
...

for example,there are two click events bind to base.js and b.js(loaded ansync by a.js),when users click the button in the page，the event binded in base.js will be invoked immediately，but then...error...

I must put the invoker in the body tag.

Is this statement in some function ? document.getElementsByTagName('head')[0].appendChild(document.createElement('script')); — Adil
– Adil, Commented May 13, 2012 at 5:32
"I want to add some codes to block the page loading." which page ??? or you want to call show() after the page loading complete ??? — dku.rajkumar
– dku.rajkumar, Commented May 13, 2012 at 5:35

Derek 朕會功夫 · Accepted Answer · 2012-05-13 05:34:00Z

1

You will have to wait until b.js loaded in.

jQuery's method:

$("<script>").attr("src","b.js").appendTo("head").load(show);

Native JavaScript:

var ele = document.createElement('script');
ele.src = "b.js";
document.getElementsByTagName('head')[0].appendChild(ele);
ele.addEventListener("load",show,false);

answered May 13, 2012 at 5:34

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Starx · Accepted Answer · 2012-05-13 05:33:45Z

0

Instead of blocking the page load, why dont you run the code on the onload event of the window?

window.onload = function() {
    show();
};

answered May 13, 2012 at 5:33

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Comments

Joseph · Accepted Answer · 2012-05-13 05:48:23Z

0

You could listen to the onload event to be sure that they are loaded before you execute anything from that script.

//a simple script loader
function loadScript(url,callback){
    var s = document.createElement('script');                    //new script
    var document.getElementsByTagName('head')[0].appendChild(s); //append to head
    s.onload = function(){                                       //add onload
        callback();                                              //callback when done
    }
    s.src = url;                                                 //start download
}

//load b.js and run "show()" when b.js is loaded
loadScript('b.js',function(){
    show();
});

edited May 13, 2012 at 5:48

answered May 13, 2012 at 5:33

Joseph

120k31 gold badges186 silver badges238 bronze badges

Collectives™ on Stack Overflow

how to block the page width javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related