I'm developing a small personal website, and for a main part of the navigation, I'd like to use location hashes. I have a link on a page embedded in an iframe that I would like to be able to change the location hash of the parent page, but I can't seem to get it to work the way I want.
To be more specific, I can get it to work if I ONLY want to change the location hash, but I also want to run a script on the parent window to check the hash after it has been changed. Here is what I did for only changing the hash:
Click Me!
And this is what I've tried, to make it run a function afterward:
<a onclick='parent.location.hash="foobar";parent.theFunction();' href="#" >Click Me!</a>
When trying this, it doesn't even seem to change the hash in the first place, which makes me think there's some other way of having it change the parent hash via JS that I'm missing.
Whoops, I ended up finding out that the hashchange event exists.
For anyone else looking to do a similar thing, here's how you'd do it:
window.addEventListener("hashchange", yourFunction)
function yourFunction() {
// do stuff
}
in your parent page - the listener will run the function yourFunction whenever the page hash changes.
I need a button to be triggered on page load. Which I've figured out how to do with a window.onload function.
But what I need to figure out is how to trigger this only when the page is loaded from a unique id (eg the button would be auto clicked when visited from example.com/#xyz , but not triggered when visited from example.com).
I don't know js much at all, so I'm not sure if this is even possible?
Thank you.
Sounds like you need an if statement!
if(location.hash === "#xyz") {
/// Do stuff
}
There isn't an event for "when the URL hash becomes a specific value". There are events for "page loaded" and for "url hash changed", and any check more specific than that needs to be handled by putting an if statement in one of those events.
It is pretty common to come across answers with javascript for a jquery question, because for simplicity sake. Since it is easily achieved using JavaScript.
var location = window.location.pathname; //returns /xyz/index.html
Please note that it is recommended not to use $(location) in jquery which may not provide an expected behaviour.
$(location).attr('pathname');
Please read this post Get current URL with jQuery? to get much clearer idea about JS and JQuery comparison for best practices.
I included the answer to keep it clear and link for more explanation.
I have an iframe tag and I want to dynamically change it using jquery animation. So for example the iframe sits on the home page, and if i click the about link, it will load the about.html and when its ready it will slide it down using animation.
I have the basic logic for it but then came about this
problem:
When I refresh the page it loads back the content of the index.html page, and what I want is that when I refresh it, it still keeps the contents of about.html.
About
<iframe id="content" name="content" align="top" src="index.html"
frameborder="0" width="100%" height="1200px" scrolling="no">
</iframe>
this is just the most basic logic, but I need help on how do I achieve the refreshing part/
and what if i dont include them in the same page but I still want to animate the page transitions. so when the users clicks a link to a new page, it will load it, and then animate it.How can I achieve this. Because recently I saw a jquery plugin callen LocalScroll and they achieve this effect, but i couldnt get it to work for new pages
Your reference to the jQuery plugin LocalScroll is on the right track. In fact, if you could implement it properly I think it would solve your problem.
Anchor-based navigation, as used in this plugin, jQuery Mobile, and other places, will update the window.location object and also be reflected in the browser's address bar so that, when an explicit page refresh occurs, the hashed location is preserved.
The answer, then, is to have a script which can parse this local link from the address. Here's a generic JavaScript code block to demonstrate this:
window.onload=function() {
var URLParts=window.location.toString().split('#');
if(URLParts.length>1)
var lastPage=decodeURI(URLParts[1]);
else
return false;
if(lastPage)
iframe_load(lastPage,'content');
}
function clear_last_page(location) {
var URLParts=location.split('#');
if(URLParts.length<=1)
return location;
URLParts.pop();
return URLParts.join('#');
}
function iframe_load(url,targetID) {
document.getElementById(targetID).src=url;
var location=clear_last_page(window.location.toString())+'#'+url;
window.location.href=location;
}
How it Works
When the window onLoad event is triggered, the URL is searched for anchor (hashed) links. If found, we will assume that this is a reference to a page and so then pass it to iframe_load().
This function does two things. First, it points your target inline frame to the page passed via url parameter. Second, it points the parent frame to a fictitious anchor, which will be preserved even after the page is refreshed.
Therefore, when you refresh the parent frame, that anchor text is grabbed, parsed, and used to re-load the last loaded inline page.
The function clear_last_page() is simply a helper function that prevents additional anchor links from being appended to the URL.
Demonstration
Visit this URL:
http://gocontactform.com/stackoverflow/dynamically-change-iframes-content/
Click the link "Page 2" to see the change. Then refresh the page.
Noteworthy
Be advised that this solution technically takes over the normal function of anchoring. So if you attempt to use anchor links normally on the page, you may get undesirable results.
You are forced to rely on iframe_load() for any links bound for that inline frame, instead of what you modeled in your question (traditional linking with a target attribute).
I might also suggest that you define no default src attribute inline. Rather, you could add to the onLoad handler a call to iframe_load('page1.html','content') and that will prevent the unnecessary attempt to load the default page when you are refreshing with anchored links in the address.
There are also other ways to accomplish what you are asking. But I believe that this solution is easy to understand and implement.
Hope that helps!
You can use the following to change the src attribute of the iFrame:
$("#content").attr('src', 'http://mysite.com/newpage.html');
Oops, looks like I misread the question.
If you want to slide it down, you can bind an event handler to the load event (jQuery doc) to do something when the frame loads.
$("#content").hide();
$("#loadLink").click(function() {
$("#content").hide();
$("#content").attr('src', 'http://mysite.com/newpage.html');
});
$("#content").load(function() {
$(this).slideDown();
});
In this example, the iframe is hidden when you click the link, and when it is ready, it slides down.
Demo
Edit: still misread it!
To save the state of which page is last shown in the iframe, you can use HTML5 localStorage.
In the load event of the iframe save the page that it's currently showing.
localStorage['lastPage'] = "about.html"
and then load it back using localStorage['lastPage'] on page load.
Updated demo showing both sliding and keeping the page after refresh.
Not possible. When you refresh a page, your browser is supposed to get the page from the server, dropping all JS data.
History API can help, but only for the newest browers.
Whenever the page loads you need to check something to know what the last src iframe loaded. By default, no browser can know this. One way to do this is to change the hash of your page when hit the click, and whenever page loads, you check if exists this hash and trigger some link with the hash.
I write this: http://jsfiddle.net/estevao_lucas/revsg/4/
Like said Michael, History API can help you.
I have a frame with a page from a different domain. Sometimes, that page likes to use a frame-buster to break out of its frame and hijack my entire page.
I have been experimenting with different ways to handle what happens when this frame wants to break out. What I have determined would be the best way to handle this is to use JavaScript to determine when the parent page url changes (via onunload) I want to direct the user back to my homepage or close the page altogether. I am a php dev and don't really ever use JavaScript.
I have tried using but that doesn't seem to work. Any ideas?
you can use something like this:
<script>
window.onunload=function() {
return confirm('Are you sure you want to leave the current page?');
}
</script>
Say I've loaded some arbitrary HTML page into my browser. Then into the address bar I append "#anchor-name" and hit enter.
Since I only added an anchor and didn't call a different page, the browser does not make another call to the server. So there is no onLoad event, etc.
Nonetheless, could some Javascript on the page detect this action? How? What's the event?
I think the answer is "no." Please prove me wrong.
Thanks
Note: Please assume there is no query string in the URL. It ends with "/index.html" or "/".
Related question: does it matter if an anchor named "anchor-name" actually exists on the page?
IE8 has an onhashchange event that is what you are looking for.
For the rest of the browsers, however, the "common" technique is to set a piece of code using setInterval that regularly checks the hash to see if it has changed since the last time it was called, and perform an action if it has. This article, however, offers a solution to onhashchange that doesn't rely on setInterval, however it looks to be way too clunky to reliably use. I would just stick to setInterval for all browsers:
var hash = window.location.hash;
setInterval(function() {
if(hash != window.location.hash) {
hashChanged();
hash = window.location.hash;
}
}, 2000); // 2 second timer, should be fine
It doesn't matter if there's no element with the hash provided.