javascript - Re-execute js on back without reloading the whole page - Stack Overflow

admin管理员组

文章数量:1406937

Is there a way to re-execute JS without refreshing a page?

Say if I have a parent page and an inside page. When the inside page gets called, it gets called via ajax, replacing the content of the parent page. When user clicks back, I would like to navigate them back to the parent page without having to reload the page. But, the parent page UI relies on javascript so after they click back, I would like to re-execute the parent page's javascript. Is this possible?

Edit: Here is some code. I wrap my code in a function but where and how would you call this function?

function executeGlobJs() {
   alert("js reload success");
}

Is there a way to re-execute JS without refreshing a page?

Say if I have a parent page and an inside page. When the inside page gets called, it gets called via ajax, replacing the content of the parent page. When user clicks back, I would like to navigate them back to the parent page without having to reload the page. But, the parent page UI relies on javascript so after they click back, I would like to re-execute the parent page's javascript. Is this possible?

Edit: Here is some code. I wrap my code in a function but where and how would you call this function?

function executeGlobJs() {
   alert("js reload success");
}

• javascript
• jquery
• html
• ajax

Share Follow edited Feb 12, 2016 at 15:12 beliy333 asked Feb 12, 2016 at 7:00 beliy333beliy333 4791212 silver badges2626 bronze badges 5

• Could you give us some code? – Timo Commented Feb 12, 2016 at 7:05
• You want the whole JS (in included files as well) on the page or just a part of it? – Wolfack Commented Feb 12, 2016 at 7:16
• Use the Functions, Luke =) – Rudolf Manusachi Commented Feb 12, 2016 at 7:32
• Probably all js. Because I have js plugins in a separate file that I would need to re-execute as well. – beliy333 Commented Feb 12, 2016 at 14:58
• I'm currently trying the approach of wrapping my js in a function. But where & how would I call that function to trigger it when user navigates back? Please show code. – beliy333 Commented Feb 12, 2016 at 15:09

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

You could use the html5 history-api:

In your click-handler you'll call the pushState-method, stat stores the current state for later reuse:

$(document).on('click', 'a.link', function () {
  // some ajax magic here to load the page content
  // plus something that replaces the content...  

  // execute your custom javascript stuff that should be called again
  executeGlobJs()

  // replace the browser-url to the new url
  // maybe a link where the user has clicked
  history.pushState(data, title, url);
})

...later if the user browses back:

$(window).on('popstate', function () {
  // the user has navigated back,
  // load the content again (either via ajax or from an cache-object)
  // execute your custom stuff here...
  executeGlobJs()
})

This is a pretty simple example and of course not perfect! You should read more about it here:

• https://css-tricks./using-the-html5-history-api/
• https://developer.mozilla/en-US/docs/Web/API/History_API

For the ajax and DOM-related parts, you should need to learn a bit about jQuery http://api.jquery./jquery.ajax/. (It's all about the magic dollar sign)

Another option would be the hashchange-event, if you've to support older browsers...

You can encapsulate all your javascript into a function, and call this function on page load. And eventually this will give you control of re-executing entire javascript without reloading the page.

This is mon practise when you use any concat utility (eg. Gulp)

If you want to reload the script files as if it would be on a page reload, habe a look at this.

For all other script functions needed, just create a wrapper function as @s4n989 and @Rudolf Manusadzhyan wrote it. Then execute that function when you need to reinit your page.

I'm having the same problem I don't use jquery. I don't have a solution yet. I think that your problem is that it doesn't read all the document.getelements after you add content, so my idea is to put all the element declarations in a function. And than after the ajax call ends to call the function to get all the elements again.

So it might be something like that

Func getElems(){
    const elem= document.getelementsby...
    Const elem.....


At the end of the js file make a call for 
the function 
getelems()

And than at the end of the event of the 
ajax call. Just call the function again.

Sorry that is something that es to my mind on the fly while reading and thinking on the problem i have too:).

Hope it helped I will try it too when I will be on the puter :)

I believe you are looking for a function called

.preventDefault();

Here's a link to better explain what it does - https://api.jquery./event.preventdefault/

Hope this helps!

---

EDIT:

By the way, if you want to execute the JS on back you can wrap the script inside of

$('.your-div').on('load', function(e) {
    e.preventDefault();
    //your JavaScript goes here
}

本文标签： javascriptReexecute js on back without reloading the whole pageStack Overflow