admin管理员组

文章数量:1023529

How do I re-run the js file when the div reloads?

In the head, I have this script:

<script type="text/javascript">  
  var auto_refresh = setTimeout(  
  function ()  
  {  
    $('#scoreboard').fadeIn("slow");  
  }, 3000); // refresh every 10000 milliseconds  
</script>

In the body, I have this div and js file: 

<div id="scoreboard">  
  <script language="javascript" 
src=".aspx?team=B87">
</script>  
</div>

I want to rerun the javascript file on a timed interval. Can it be done?

How do I re-run the js file when the div reloads?

In the head, I have this script:

<script type="text/javascript">  
  var auto_refresh = setTimeout(  
  function ()  
  {  
    $('#scoreboard').fadeIn("slow");  
  }, 3000); // refresh every 10000 milliseconds  
</script>

In the body, I have this div and js file: 

<div id="scoreboard">  
  <script language="javascript" 
src="http://www.sportsnetwork./aspdata/clients/cbaskscoreboard.aspx?team=B87">
</script>  
</div>

I want to rerun the javascript file on a timed interval. Can it be done?

  • javascript
Share Improve this question edited Oct 21, 2014 at 15:10 Eric Leschinski 154k96 gold badges422 silver badges337 bronze badges asked Nov 22, 2011 at 1:15 Billy SteffensBilly Steffens 511 silver badge5 bronze badges 1
  • What do you mean by "div that reloads?" What do you mean by "rerun the js file?" Show some code. – Matt Ball Commented Nov 22, 2011 at 1:18
Add a ment  | 

3 Answers 3

Reset to default 3

How to re-run a javascript file:

Use JQuery: 

$.getScript("my_javascript.js", function(){

   alert("Script loaded and executed.");
   // Here you can use anything you defined in the loaded script
});

For more details how this works: How do I include a JavaScript file in another JavaScript file?

This is the wrong way to do this.

You should include a script file once, in your <head> or at the bottom of your <body>. That script file should define a function that you will be able to call. Now you can call this function directly from your setTimeout.

Say the JS file has this:

var sayHello = function() {
  alert('Hello!');
};

Now include that file like this:

<head>
  <script type="text/javascript" src="myscript.js"></script>
</head>

And now change your timeout code to this:

var auto_refresh = setTimeout(function() {  
  $('#scoreboard').fadeIn("slow");
  sayHello();
}, 3000);

It's a good practice to never have the inclusion of a javascript file "do" stuff, because as you discovered it's then hard to make it do that stuff again. Instead it should define functions or objects that can be called upon to do stuff as many times as you like.

I would agree with Squeegy that you best solution is to call a function, but if you are not the author of the included script and must find a solution I would suggest a few things:

[EDIT Nov 22 12:27pm]
Now that I better understand that the page you are trying to pull from is a script that returns document.write I think there are 2 options. I've inserted them here with some details and left my original post below for posterity.

Option 1:

  • Create a page that is on your domain that includes the script. For example, it could be called www.yourdomain./sportsnetwork/B87/.
  • In the setInterval function build an iframe with that as it's source and inject then into your scoreboard <div>.

Option 2:

  • Create a page that is on your domain that will parse the sportsnetwork. page, remove the document.write and pass back html.
  • In the setIntercal function make an ajax request to get the html and insert that into your scoreboard <div>.

Original Option that will not work with document.write:

var auto_refresh = setInterval(  
  function () {  
    $('#scoreboard').fadeIn("slow");
    var unique = Date.now();
    var scriptFile = document.createElement('script');
    scriptFile.type = 'text/javascript';
    scriptFile.async = true;
    scriptFile.src = 'http://www.sportsnetwork./aspdata/clients/sportsnetwork/pullouts/logoscores/cbaskscoreboard.aspx?team=B87&unique=' + unique;
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(scriptFile, s);
  }, 3000);

This will add a new script to the page every 3 seconds and the browser will think think it is a different script due to the unique tag. I think you might need to rework the timing of the fade in relation to the reloading of the script depending on what their relationship is.

How do I re-run the js file when the div reloads?

In the head, I have this script:

<script type="text/javascript">  
  var auto_refresh = setTimeout(  
  function ()  
  {  
    $('#scoreboard').fadeIn("slow");  
  }, 3000); // refresh every 10000 milliseconds  
</script>

In the body, I have this div and js file: 

<div id="scoreboard">  
  <script language="javascript" 
src=".aspx?team=B87">
</script>  
</div>

I want to rerun the javascript file on a timed interval. Can it be done?

How do I re-run the js file when the div reloads?

In the head, I have this script:

<script type="text/javascript">  
  var auto_refresh = setTimeout(  
  function ()  
  {  
    $('#scoreboard').fadeIn("slow");  
  }, 3000); // refresh every 10000 milliseconds  
</script>

In the body, I have this div and js file: 

<div id="scoreboard">  
  <script language="javascript" 
src="http://www.sportsnetwork./aspdata/clients/cbaskscoreboard.aspx?team=B87">
</script>  
</div>

I want to rerun the javascript file on a timed interval. Can it be done?

  • javascript
Share Improve this question edited Oct 21, 2014 at 15:10 Eric Leschinski 154k96 gold badges422 silver badges337 bronze badges asked Nov 22, 2011 at 1:15 Billy SteffensBilly Steffens 511 silver badge5 bronze badges 1
  • What do you mean by "div that reloads?" What do you mean by "rerun the js file?" Show some code. – Matt Ball Commented Nov 22, 2011 at 1:18
Add a ment  | 

3 Answers 3

Reset to default 3

How to re-run a javascript file:

Use JQuery: 

$.getScript("my_javascript.js", function(){

   alert("Script loaded and executed.");
   // Here you can use anything you defined in the loaded script
});

For more details how this works: How do I include a JavaScript file in another JavaScript file?

This is the wrong way to do this.

You should include a script file once, in your <head> or at the bottom of your <body>. That script file should define a function that you will be able to call. Now you can call this function directly from your setTimeout.

Say the JS file has this:

var sayHello = function() {
  alert('Hello!');
};

Now include that file like this:

<head>
  <script type="text/javascript" src="myscript.js"></script>
</head>

And now change your timeout code to this:

var auto_refresh = setTimeout(function() {  
  $('#scoreboard').fadeIn("slow");
  sayHello();
}, 3000);

It's a good practice to never have the inclusion of a javascript file "do" stuff, because as you discovered it's then hard to make it do that stuff again. Instead it should define functions or objects that can be called upon to do stuff as many times as you like.

I would agree with Squeegy that you best solution is to call a function, but if you are not the author of the included script and must find a solution I would suggest a few things:

[EDIT Nov 22 12:27pm]
Now that I better understand that the page you are trying to pull from is a script that returns document.write I think there are 2 options. I've inserted them here with some details and left my original post below for posterity.

Option 1:

  • Create a page that is on your domain that includes the script. For example, it could be called www.yourdomain./sportsnetwork/B87/.
  • In the setInterval function build an iframe with that as it's source and inject then into your scoreboard <div>.

Option 2:

  • Create a page that is on your domain that will parse the sportsnetwork. page, remove the document.write and pass back html.
  • In the setIntercal function make an ajax request to get the html and insert that into your scoreboard <div>.

Original Option that will not work with document.write:

var auto_refresh = setInterval(  
  function () {  
    $('#scoreboard').fadeIn("slow");
    var unique = Date.now();
    var scriptFile = document.createElement('script');
    scriptFile.type = 'text/javascript';
    scriptFile.async = true;
    scriptFile.src = 'http://www.sportsnetwork./aspdata/clients/sportsnetwork/pullouts/logoscores/cbaskscoreboard.aspx?team=B87&unique=' + unique;
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(scriptFile, s);
  }, 3000);

This will add a new script to the page every 3 seconds and the browser will think think it is a different script due to the unique tag. I think you might need to rework the timing of the fade in relation to the reloading of the script depending on what their relationship is.

本文标签： javascriptRerun js when div is reloadedStack Overflow

版权声明：本文标题：javascript - Rerun js when div is reloaded - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745597399a2158253.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。