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.
Related
is there any possibility to make smooth slide transition between two seperate html files?
Like for example.
On one html is
Link
and after clicking this link page is not reloading, just sliding to the second file?
You have to load the second HTML file into an iFrame or into a DIV by ajax, then slide it into view. You can use jQuery for that and for easy access to animations.
You may also would like to update the URL of your page, for that you can use location.hash to do it without reloading the page. You can also check for observehashchange plugin for jquery to check for the hash change when a user changes the URL.
You can view a sample here.
To have Google access the pages, you can add a sitemap.xml to your site to describe the pages and you may also have to setup webmaster tools to provide Google with useful information about your site. Here you can add the links and Google will got it. I have a page where more than 5000 links are seen by Google, however they aren't on any page by default.
But if you want to have normal <a> links on your page, you can use a simple jQuery to trigger the animation instead of going to the link.
Go to page 2
Go to page 3
Go to page 4
<script>
function LoadPage(page) {
//Put your page loader script here
}
$(document).ready(function(){
$(a).click(function(event){
event.preventDefault();
var page = $(this).attr('href').substr(1);
LoadPage(page);
});
});
</script>
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; });
I have a main page "index.html". This main page is the enterance to the site which is done in HTML5. There are other pages for the site:
"about.html", "work.html", "portfolio.html", "contact.html"
So all of these pages have a div called "contentDiv" which has the copy/text accordingly. User enters the site via "index.html" and if user clicks on one of following the nav links:
About | Work | Portfolio | Contact
"index.html" page loads the content of clicked page's "contentDiv" using JQuery's load() call and then slides in the loaded div using animation.
Site is backward compatible so if Javascript is disabled then user is taken to the clicked page instead of having the "index.html" to load the content via load() call.
By the way, the nav link(s) are coded like this:
<a href="about.html" title='About'>About</a>
Once the "index.html" loads the requested content, By using pushState(), the URL is updated. So if user clicks on "about" link then pushState() updates the URL to:
"http://www.abc.com/about.html"
The reason I have not inserted any hash into the href tags, because I want the site to have a fallback just in case if the Javascript is disabled. This way, user can be directed to the requested page ('about.html') instead of "index.html".
So far all works well as expected however here is the issue. When user is on "index.html" and clicks on anyone of the sections for example "about.html", content is loaded and URL is updated via pushState(). So now the URL is "http://www.abc.com/about.html". Now if user refreshes the page("index.html"), "about.html" is loaded instead of "index.html" doing the load() calls.
Lets say if I code the nav href tags like this:
About
then the URL ends up having a hash in it. And if I copy and email the link "http://www.abc.com/#about" to a user, and if user tries to open the link via browser with javascript disabled then user will not be able to get to "about.html" because link only has '#about' instead of "about.html".
What I am trying to do is indeed doable I just don't know how to approach it. If anyone can help me on this that would be wonderful.
Forgive me, for such a long description.
Thank you.
I ended up setting all the nav hrefs to "". and then setting the hrefs values on document.ready() function.
$('a[rel=nav]').attr('href', '');
Thanks.
This code will achieve what you need to do and support the users with javascript disabled.
$('a').click(function() {
window.location.hash = $(this).attr('src');
return false;
}
Your urls will look something like http://www.yoursite.com/#about.html if you click on the about link and they work when you refresh.
If you want to learn more about making ajax sites I recommend you visit this blog Css-Tricks.com
A site that links to mine keeps my site in a frame, so I added the following JavaScript to my page:
if (window.top.location != window.location) {
window.top.location = window.location
}
Now if I get to my site via the offending site, my site successfully breaks out of the frame. But the back button breaks! The back button sends the user to the framed version of my site, which immediately breaks out again, returning him to where he was trying to leave! Is there a simple way to fix this?
window.top.location.replace(window.location);
The replace method is specifically for this purpose. It replaces the current item in the history state with the new destination so that the back button won't go through the destination you don't want.
jfriend00's answer is indeed correct. Using the window.location.replace method will work without affecting the back button.
However, I'd just like to note that whenever you want to stop a page from being framed, you should do more than just that! There are a couple methods of preventing a simple script like that from breaking out of the frame, which work in many modern browsers. Perhaps you can disable the page, display a message with a link to the full page, something like that. You could also use the X-Frame-Options response header that tells the browser not to display the page in a frame. If you don't take some of these measures, your site could be clickjacked.
Another solution is to open your site in a new window leaving a friendly message in the iframed site:
if (parent.frames.length)
{ window.open("mySite.htm", "MySite");
location.href= "framedMessage.htm";
}
Where framedMessage.htm contains some friendly/warning message.
I've got an ASP.NET page that takes a long time to download and returns partial results as it's loading (as per my previous question). On the page I have some links to download files, ie. the response headers contain "Content-Disposition: attachment", so that the browser doesn't navigate away from the page. However, if the user clicks one of these links while the page is still loading it stops loading - normal behaviour, but not what I want in this case. I can get around that by adding target=_"blank" to the links, but this momentarily opens a new window and the closes it again (once the browser realises it's an "attachment"). Is there any way to avoid having those links stop the current page load without this new window trick? JavaScript is OK.
You could put a hidden iframe on the page and target that. (or use javascript to generate one dynamically).
Not sure it if will help, but try to add an iframe to the page and have your links do document.getElementById('your_iframe').location = 'your_url'
You could try a meta refresh
<meta http-equiv="refresh" content="2;url=http://path.to/file.download">