I have a very simple jquery mobile application:
/index.html (contains a link to home.html)
/home.html
I want home.html to only be visible for users who satisfy a prerequisite (e.g local storage should contain a logged=true). Otherwise I want them to be redirected back to index.html. Of course I want this to happen either when the user clicks on the link from index.html or if he/she navigates directly to home.html via the URL.
In order to enforce this I have the following in an external script which is inluded in all pages:
$(document).on('pagebeforecreate', function(e) {
if (!userIsLoggedIn() && e.target.id=='home_page') {
$.mobile.changePage('index.html');
}
});
Note that my home.html starts with <div home-role="page" id="home_page">
This code works but the problem is that the user gets to see the contents of home.html for an instant. I've seen in the API that pagebeforecreate is the earliest event that is being called on a page transition. Calling the changePage though doesn't stop from further events to being called on this page that I don't want users to see.
How can I completely stop the rendering of home.html and immediatelly redirect user back to index.html?
follow is just idea adding your code.
make a page invisible by default in "home.html".
check logged in when "home_page" is at 'pagebeforecreate'.
if logged, make page to be visible.
if no, change to index.html
but, this is just hide a page to unlogged person, not really secure.
it's still opened to get a HTML Plain code from URL.
This will help you to prevent jquery mobile from rendering page.
jQuery(document).on('mobileinit', function(){ jQuery.mobile.autoInitializePage = false; });
Related
In HTML you can now use prefetch, *prerender like this
<link rel="prerender" href="https://www.adorama.com/">
This prerenders the next page behind the scenes
This is used a lot in blogs and e-commerce listing pages to pre-render the next pages..
But the problem is, What if after the prerender successfully ran, and now the user made a change in the page that alters the way the next page (the one that is already pre-rendered) behaves.
How can we invalidate that prerendered page, so when we view it first it will request a new page and not show the pre-rendered page.
We don't want to overwrite the link, Because we want to benefit from client or CDN caching..
*(See a nice talk about this from Yoav Weiss - Hinting the browser)
The only way I can think of now, is to have logic in the pre-rendered page to check for page visibility API and we can check if visibilityState === prerender and then add a event listener for on visibilitychange and on the event that visibilityState === visible we can check if the stored values (settings) are still the same and if not we can run the logic needed to render page correctly or simply refresh the page.....
I am working on an HTML website where I have 4 divs in an index.html page.
Earlier on clicking the div section used to expand it and the other section became smaller in width.
Then the client asked to make sure that the URL was changed when we click any of the div.
Suppose we click the div called test. The page url shoul become /test.html, without the page reloading. I have implemented this functionality using the history API.
Now when I click on the test div and the url becomes /test.html and then if I click a link, it redirects to another page.
From this page, if I click on the browser back button, then it takes me to /test.html which does not exist and we get a 404 error.
I tried making a redirection page called test.html which redirects back to the index.html page, but we get a blink while doing so.
What I want to ask is whether there is a solution for this problem?
If you have mod_rewrite enabled on the web server, you could set this up as a URL rewrite rule.
RewriteEngine On
RewriteRule ^test.html originalfile.html [NC]
This will redirect test.html to the original html file when the user presses the back button and navigates to test.html while the browser address bar still displays test.html. From here, you should be able to detect the address in javascript and display the appropriate div.
(Note that you will probably need to modify the above rewrite rules depending on how your server is configured. For more information about creating rewrite rules, see this link.
I have added AJAX to a client's site to enable some simple animation of page transitions. So if we navigate to his homepage (with js enabled) at firedogcreative.com and then navigate to his edit page, and then to one of his work pages; we end up with a history something like this:
firedogcreative.com --> firedogcreative.com/#edit --> firedogcreative.com/#example1
Ajax takes care of loading the content of each of those pages in, it updates the hash in the URL bar in each case, and all works exactly as planned.
When a user clicks the back button, though, I'm not sure I understand what is happening. If they are at #example1 and hit the browser's back button, the URL bar updates to firedogcreative.com/#edit, but the page content doesn't change. If the user then reloads the page, though, it correctly reloads to #edit.
I tried adding this, which I thought would cause the pages not to cache and thus each back button call would reload the page, but it didn't seem to have an effect:
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
};
If that worked, it would be a passable solution. The page would only ever ACTUALLY reload when the user uses the forward/back buttons, which would be fine.
So my question is, what is going on with the back button? Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
So my question is, what is going on with the back button?
It is going back to the previous URL.
Since changing the fragment identifier to track application state is a hack, nothing else happens.
Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
No. You are navigating back within the same document, so it isn't being unloaded.
You need to monitor the hashchange event and change the application state with your own JS.
Alternatively, switch to using pushState and watch the popstate event.
Is there any way through which i can have a javascript on a page to redirect any url that's present on the page to some specific site.
For example on a HTML page i have say 10 urls present. Can i add a javascript to the HTML page so that if anyone clicks on any url on that page, it gets redirected to the a specified page.
Thanks.
EDIT::
My scenario is i have some 13k links on a page and i do highlighting of terms on the page, even if any link is also clicked on the page, the word gets highlighted on that page. In order to do that i process each url and add some more info to it to go thought my server perl script which does the job of highlighting. But now due to large number of links on page, it takes time to process the page and page is rendered after a long time. So i want to have a javascript which can pass any link by adding info to my perl script on server.
I tried doing it server side my breaking page into pieces and processing in parallel but not much improvement.
Any other solution or suggestions are welcomed.
Appreciate your help in this regard.
You can use preventDefault in the click event handler to prevent the default behavior(open the link), and use location.href to redirect to a new page.
if you're using jQuery:
$(".links").click(function(event){
event.preventDefault();
location.href = "http://google.com";
});
You can do this with the following jQuery block:
$(document).ready(function () {
$('#urlId').live('click', function (e) {
e.preventDefault(); //Stops the link from opening
window.location.href = "/specifiedPage"; // Changes the location of the page
});
});
You can create a "protective glass" div in front of everything and handle the click event on that div. This has the advantage of not touching the page so after removing the div anything can go back to normal.
Only be sure to put a non-fully-transparent color on the div background because I've found that Internet Explorer ignores events if the div is fully transparent.
Something like rgba(0,0,0,0.001) is enough.
I posed a question that related where I could display "Page loading" in asp.net page using jQuery. But, I had no luck.
So, say I have page1 and it navigates to page2 and page2 doesn't some heavy data access. Is there any way I could show the "preloading" page while the page2 is finished.
I want to navigate from Page1 -> "Preload" -> Page2(once page2 is completed).
I want to know if this is possible using Javascript in the code behind.
Thanks.
The way you would typically do this is have a page that shows the message and uses AJAX, in my example using jQuery, to load the other page onto the current page.
<body>
<div id="content">
Page loading
</div>
<script type="text/javascript">
$(function() {
$('#content').load('/url/to/other/page');
});
</script>
</body>
I've omitted loading jQuery itself.
Note: you could do this on a single page by having it generate different content based on some query parameter. You don't need to actually have a separate "loading" page -- though you could probably make that work for several different pages as well.
If using JavaScript is OK, redirect the user to the Preload page, and then use JavaScript to take the user to Page2. This will make the Preload page stay visible while Page2 is loading.
(Also, "JavaScript in the codebehind"? Don't tell me you're using JScript.NET or something as your server side language)
No matter what you do, to begin loading Page2 you'll have to navigate away from Page1 (unless you get complicated and wrap your pages in another container on a single page and navigate within your container).
Otherwise the default content for Page2 should be a "Preloading" message that gets taken away once the document has finished loading its content.
Is a possible solution to have an almost empty page with a few placeholder divs in the right places containing a loading image. Then run web service calls to populate each placeholder in jquery/javascript?