简体   繁体   中英

go to page and open modal javascript

The goal is to go to a page and show a modal from that page.

Is there a way to have this execute after the page has successfully loaded?

//load page
window.location.href = 'foobar.html';

//wait until page is ready then open modal?
$(window).ready(function () {
  console.log('did it work?');
  $('#someModal').modal('show');
});

I listed the javascript file in the html page but this just isn't working. Everything is happening in the same document window from the initial page.

ANSWER

I decided to get the previous url and search for a substring to trigger the modal to show on the second page.

//first js script for the first html page
window.location.href = 'foobar.html';

//second js script for the second html page
$(document).ready(function () {

    var prev_url = document.referrer;

    if (prev_url.includes('substring')){
        $('#someModal').modal('show');
    }
});

Thank you for the suggestions.

I thought of a way to get this to work, On the second page document reload. I will get the last url string and see if it contains a substring, If yes. show the modal: Seems to be working :)

$(document).ready(function () {

    var prev_url = document.referrer;

    if (prev_url.includes('substring')){
        $('#someModal').modal('show');
    }
});

Unfortunately, javascript only exists in between page loads, every new page load will clear all executing javascript code. If you want to simulate a page load, you can use the History api, which will push a new entry onto the browser's back button, and then run code after that. instead of assigning values to window.location , you will need to call pushState and give it some arguments as described in the link, then proceed to call your modal code.

for example,

window.history.pushState({}, window.document.title, 'foobar.html');
$('#someModal').modal('show');

You should separate the scripts. 1rst page:

 $(document).ready(function () {
window.location.href="foobar.html";
});

2nd page:

 $(document).ready(function () {
     $('#someModal').modal('show');
});

I hope this works for you.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM