In ASP.NET MVC C#, I used Context.Request.Headers["Referer"] to get the referrer information from which page it is navigated to. But when I refresh the page, it still shows the old referrer url.
Is there any way that I can differentiate the page refresh and page load by navigation?
JS:
$(document).ready(function () {
debugger;
var referrer = '#Context.Request.Headers["Referer"]';
}
You could use window.onbeforeload to set a cookie/sessionStorage value, the event is triggered before page refreshes or a new page is to be loaded.
// Vanilla JavaScript
window.addEventListener('onbeforeload', function() {
// your code to set value here
});
// jQuery
$(window).on('beforeunload', function() {
// your code to set value here
});
After the page is loaded (window.onload), you can check for the value. If it matches you know the page is refreshed. You must also delete it at this point.
// Vanilla JavaScript
window.onload = function() {
// your code to check value here
// remember to delete the value too
});
// jQuery
$(window).on('load', function() {
// your code to check value here
// remember to delete the value too
});
The load event fires at the end of the document loading process - all of the objects in the document are in the DOM at this point. If you want to perform the check as soon as possible you can use an IIFE:
(function refreshCheck() {
// your check here
// remember to delete the value too
})();
Related
I have script, what work one time when window loaded, it work on this page, but site use some navigation links what not fully reload page (see this answer for example: Modify the URL without reloading the page). How can I detect that and run my script again?
I have one idea: storing URL (without anchor) in variable and check it periodically with current url, but I think this is bad solution. May be you know better one?
JavaScript or JQuery is possible to use.
Use window.onpopstate or window.onpushstate if u are using pushState or replaceState ( from ur given example).
ex:-
To Navigate Without reload ( you already did this )
// Your code to fetch new URL body and title
// update the DOM then use following code to update URL also (don't use location.href, otherwise the page reloads)
// sorry u already know this because u provided the example ;)
let data = { title : "Current Title",
body : document.body.innerHTML" } // to store current page data
window.history.pushState(data, 0, "newURL");
To detect navigation ( i.e., you wanna do )
window.onpushstate: when above code runs for navigation to a new url and load new content without reload ...
window.onpushstate(function() {
// detects ur navigation
})
window.onpopstate: when you press back button
window.onpopstate(function (e) {
let { data } = e.state;
// data object that u gave in pushState method when u called ur last / latest pushState method...
// use this data to retrieve previous data content and title
let { title, body } = data;
document.title = title;
document.body.innerHTML = body
})
for more detail mdn docs
That's because the new pages are either
1 ) Already at the ready and simply being brought in-sight by jQuery
2 ) Ajax called in.
If you scout for your navigation (the links you click on to go to the other page), you should find click me or so.
If you look for wherever this is is bound (i.e.: $('#navigation a').on("click", function(){});, you can simply wrap your script within a function, and trigger this function together with loading the new page every time. (after it, obviously).
I wish I could be more clear, but you did not provide any code yourself, so I have absolutely no idea of what kind of example I should be giving here.
-- the point: Those page changes are triggered by something in your javascript. Find the trigger that makes the page-change happen, and simply insert myCustomFunction();.
If you want to make your bindings update with a new DOM, you could use this:
function setBindings(){
//removing the old bindings prevents the "click" from triggering twice.
$('a').off("click");
$('a').on("click", function(){
//load page and such here
//Apply script you want to run here
setbindings(); //rerun the function to set the bindings.
});
}
I think you are looking for hashchanges you can listen to this event onhashchange
window.onhashchange = function(e) {
var sublink = window.location.hash.substring(1);
//do your thing here
}
You can also check what updated the url after the hashchange
var sublink = window.location.hash.substring(1);
I think the URL of script is cached，do you used Ajax get method？if it is，please
like this write url "wwww.baidu.com?"+Math.random();if not is ,in the firefox ,you can used pageshow event.
I have three pages in my app: #main, #new and #existing.
Everytime #new is loaded, I want it to detect if it came from #menu or #existing. Depending on this information it should either do nothing or populate its form.
How can I achieve this both in terms of the right command for previous page and handling the DOM correctly?
According to your # these pages need to be dom elements. Just use the variable in javascript and check this in every step.
Create a new variable like lastPage
On every click, I prefer to use data-foo like HTML5 data attribute.
Change lastPage according to navigation.
And do after that what you really want.
var lastPage = '';
/* This code from jQuery Mobile, link is below the code. */
// Define a click binding for all anchors in the page
$( "a" ).on( "click", function( event ){
// Prevent the usual navigation behavior
event.preventDefault();
// Alter the url according to the anchor's href attribute, and
// store the data-foo attribute information with the url
$.mobile.navigate( this.attr( "href" ), {
lastPage: this.attr("data-foo") // store data here
});
// Hypothetical content alteration based on the url. E.g, make
// an AJAX request for JSON data and render a template into the page.
alterContent( this.attr("href") );
});
HTML Example
Main Page
New Page
Existing Page
You can make data-anythingyouwant. Only the data is important, after that you can use everything. It just an HTML5 DOM attribute.
Edit:
I suggest you to check navigation page. You can understand better the concept after that.
Code Source: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/navigation/
Take advantage of jQuery-Mobile page events, such as pagebeforehide and pageshow.
Demo
Store current page's id before navigating away.
var prevPage;
$(document).on('pagebeforehide', function () {
prevPage = $.mobile.activePage[0].id;
});
When destination page is active, retrieve the stored previous page id.
$(document).on('pageshow', function () {
$(this).find('.destination').text('Previous Page: ' + prevPage);
});
I have an application that is scraping websites for data. It is scraping the website in an iFrame. I need to scrape to subsequent website from that same iframe that both have an entry adress that leads to a page with a field and a button. On that page I enter a number into the field and push the button to go to the next page. The problem I have is that when I (coded) push the button, it doesn't wait for the page to load and scrapes before there is anythong there.
setTimeOut and Delay seem to be ignored completely.
$(document).ready(function() {
$('#startbutton').click(function() {
$('#iframe').attr('src', 'www.pageone.com');
// Here I start a load because I need to wait for the button to become available.
$('#iframe').one('load', function() {
$('#okbutton').click();
});
// This is where it goes wrong. I would assume that it waits for the second page
// to load. But it doesn't. Adding another load block didn't help.
scrapeFunction();
});
});
How do I get these timings right?
when I (coded) push the button, it doesn't wait for the page to load and scrapes before there is anythong there
Actually, it doesn't even wait for the button to be pressed. Instead, you want to wait for another load event:
var $if = $('#iframe');
// (1) assign a load handler
$if.one('load', function() { // that says "When loaded (first), …
// (3) assign the next load handler
$if.one('load', function() {
// (5) which then (second load) can scrape the content
scrapefunction();
});
// (4) and load it
$('#okbutton').click();
}); // …"
// (2) and load it
$('#iframe').attr('src', 'www.pageone.com');
This will execute the code inside when the iFrame has been loaded.
$("iframe").ready(function() {
//iFrame loaded
scrapeFunction();
});
I would like to prevent the user to access subpages of my jqm page. To do that I use the pagebeforecreate event to check a certain condition and depending on that, change the page displayed (cancel current pageload and redirect or normally load the current starting/main page). The Problem is, that I still see the page flickering up before the changePage() is executed even when I call the preventDefault() method. I also used a relative URL as the first parameter (to = 'page.php') of the changePage(to, options) and since my #subpage1 lies within the page.php it should open - which it did - but then the transitions are broken because no real refresh was done.
Note that I have a page.php including different #subpage's (such as #subpage1, #subpage2).
jQuery(document).on('pagebeforecreate', '#subpage2', function(event, data) {
if (!isCondition1() && !isCondition2()) {
// stop loading #subpage2
event.preventDefault();
jQuery.mobile.changePage(jQuery('#subpage1'), {
data: 'lang=de¶m1=foo¶m2=bar',
reloadPage: true,
type: 'get'
});
}
// go on loading #subpage2
});
jQuery(document).one('pageinit', '#subpage2', function() {
// do something
});
Have you tried setting the body style to display:none in the html? And then if the page loads correctly you can set it's display property? That should be a 'workaround' to prevent the flicker of the page?
I need to detect the first time a page loads in jQuery so that I can perform some actions only when the page loads the first time a user navigates to that page. Similar to server side code page.ispostbasck. I have tested $(document).ready and it fires every time the page loads so this will not provide what I need. I have also tried the jQuery Load function - it also fires every page load. So by page load an example is that I have an HTML input tag on the page of type button and it does not fire a postback (like an asp.net button) but it does reload the page and fires $(document).ready
Thanks
You will have to use cookie to store first load information:
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
Note: Above example uses jQuery Cookie plugin.
An event doesn't exist that fires only when the page is loaded for the first time.
You should use jQuery's .ready() event, and then persist the fact that you've handled a first time page load using your method of choice (i.e. cookie, session variable, local storage, etc.).
Note: This method will never be fool proof unless you can store this information at the user level in a DB. Otherwise, as soon as the user clears their cookies, or whatever method you choose, the "first time loaded" code will fire again.
I just ran into this problem and this is how I handled it. Keep track of the first time the page loads by using a variable initialLoad:
var initialLoad = true;
$(document).ready(function() {
...
...
...
initialLoad = false;
});
Then in other functions, you can do this:
if (initialLoad) {
//Do work that is done when the page was first refreshed/loaded.
} else {
//Do work when it's not the initial load.
}
This works well for me. If the user is already on the page and some jQuery functions run, I now know if that user just loaded the page or if they were already on the page.
The easy solution is to use jQuery ‘Once’ plugin
$(element).once('class-name', function() {
// your javascript code
});