I am using the below to set my iFrames content, but will setting the same url a second time refresh the content in all browsers? Or do I need to use http://targeturl.com/targetpage?random=currenttime to prevent caching and cause a reload?
function setIframeSource(Iframe, targetUrl){
var Elem = document.getElementById(Iframe);
Elem.src = targetUrl;
}
it will definitely reload the page, but caching might be handled differently depending on the browser/version/server and even user settings, so if you want to refresh it properly - use cachebuster (time).
You shouldn't need to force a cache refresh like this on web pages, unless you know that that particular web page needs a forced cache refresh.
If you needed to append a cache refresh querystring to every web page in an iframe, then this would be true for accessing any web page in your browser, which obviously isn't the case.
I believe it shouldn't refresh the iFrame if the URL is the same or only the fragment identifier (# part) changes, but you might need to test this on a few browsers (particularly IE which never seems to follow specs)
If you are setting the URL with Javascript, why don't you call the reload() method of the iframe? Eseentially, that iframe is a window, and contains the same methods you would have for a normal window object.
Related
I did a frame redirection to redirect subdomain.domain1.com to domain2.com. It works well ie I got "subdomain.domain1.com" in the address bar and the domain2.com is well displayed. However, I try to get the url in js code.
console.log(window.location.href);
This line show me "domain2.com" but it would be "subdomain.domain1.com". How to get that ?
window refers to the current page.
If you want the URL of the parent frame then you would need to go to window.parent.
At that point you'll run into a cross-origin error. If you controlled the parent then you could use postMessage to pass the data through.
Since you are using a frame redirection, that seems unlikely though. Generally this is one of many limitations with frame based redirection that mean you should generally avoid that approach in the first place.
I'm working on a website that uses AJAX loading with some jQuery animations.
With JavaScript, I grab the href from a dynamically generated link to a PHP-based page, and then add that href to URL (after the inevitable #/) .
So far so good, except if a user bookmarks the page and tries to access it, that user will arrive to the home page, instead of the page he/she expected to access.
So, when a page is accessed directly, not by clicking on the internal link of the website, I want to remove #/ from the url, but keep everything after it, so that URL that was bookmarked like this:
http://www.mysite.com/#/somepage
gets rewritten as this:
http://www.mysite.com/somepage
THEN, after the proper page ( http://www.mysite.com/somepage ) finished loading, I want to stick #/ back into its former place in URL ( http://www.mysite.com/#/somepage ), without reloading the page (which, thanks to a clever snippet I'm using, will ensure that the rest of the navigation works the way it should.)
So:
Before page loads, check URL and if it has #/, remove it.
Load page located at hash-less url
Redisplay the url with #/, without reloading the page.
Is it even doable? If yes, I'd be grateful for a lesson.
What you are trying to do is doable but an utter PITA to maintain, and it will not be available on all browsers. That aside, the key resides in the history object relatively recently extended to add a new set of "tricks". Its full doc is available from MDN.
What you are after to do this is the replaceState command. Reads as follows:
Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that Firefox currently ignores the title parameter; for more information, see manipulating the browser history.
This will allow you to replace your current page in the history of the browser, but not in the URL. The URL will be exactly as you have it - with the hash. No point changing it considering your solution.
However, you will have to make sure that your hashless page redirects to the hash-present page for clients with the history object, for consistency. That's the only requirement.
Before page loads, check URL and if it has #/, remove it.
Not possible. The fragment id is not sent to the server, so you can only access it with client side code and that requires the page to load (or at least to start loading).
Load page located at hash-less url
Redisplay the url with #/, without reloading the page
Use XMLHttpRequest to get the data, DOM to change the document to use it, and the history API to change the URL in the address bar.
As has been pointed out in one of the answers, you can't remove hash before your page loads.
However, once the page started loading, the manipulation described in the question is possible.
Here's one way to do it.
// Remove the hash and reload the page at url without hash
if (window.location.href.indexOf('/#/')>=0) {
window.location = window.location.href.replace(/\/#\//, '/');
}
Once the new page started loading, you can use history.pushState to update the URL display:
if ((window.location.href.indexOf('/#/')<1) && (location.pathname != "/")) {
history.pushState({}, "page x", location.protocol + '//' + location.host + '/#' + location.pathname);
}
You gotta keep in mind though that pushState is only available for browsers started with Gecko 2.0, so placing the hash back into the url will not work in older browsers, period.
This may lead to some unfortunate situations. For example, hypothetically, your url http://www.mywebsite.com/somepage gets indexed by a search engine. A user clicks on that link, accessing your website in an older browser that doesn't support pushState, and then clicks on some other link when browsing your AJAX-enabled website. That user is likely to arrive to
http://www.mysite.com/somepage/#/someotherpage
And then, as the user keeps clicking, it will only keep getting worse:
http://www.mysite.com/somepage/#/someotherpage/#/yetanotherpage/#/andsoon/#/andsoforth/
So what you probably need is something to make sure that your hashes don't keep propagating.
You can also wrap your hash removing / replacing code in a conditional:
if (history.pushState) {
// add hash
} else {
// provide some alternative
}
Finally, look into these two resources. You may not need the hash at all: History.js and jQuery Address.
What is the difference between JavaScript's
window.location.href = window.location.href
and
window.location.reload()
functions?
If I remember correctly, window.location.reload() reloads the current page with POST data, while window.location.href=window.location.href does not include the POST data.
As noted by #W3Max in the comments below, window.location.href=window.location.href will not reload the page if there's an anchor (#) in the URL - You must use window.location.reload() in this case.
Also, as noted by #Mic below, window.location.reload() takes an additional argument skipCache so that with using window.location.reload(true) the browser will skip the cache and reload the page from the server. window.location.reload(false) will do the opposite, and load the page from cache if possible.
If you say window.location.reload(true) the browser will skip the cache and reload the page from the server. window.location.reload(false) will do the opposite.
Note: default value for window.location.reload() is false
The difference is that
window.location = document.URL;
will not reload the page if there is a hash (#) in the URL (with or without something after it), whereas
window.location.reload();
will reload the page.
If you add the boolean true to the reload
window.location.reload(true) it will load from server.
It is not clear how supported this boolean is, W3Org mentions that NS used to support it
There MIGHT be a difference between the content of window.location.href and document.URL - there at least used to be a difference between location.href and the non-standard and deprecated document.location that had to do with redirection, but that is really last millennium.
For documentation purposes I would use window.location.reload() because that is what you want to do.
As said, modifying the href when there is a hash (#) in the url would not reload the page. Thus, I use this to reload it instead of regular expressions:
if (!window.location.hash) {
window.location.href = window.location.href;
} else {
window.location.reload();
}
Came across this question researching some aberrant behavior in IE, specifically IE9, didn't check older versions. It seems
window.location.reload();
results in a refresh that blanks out the entire screen for a second, where as
window.location = document.URL;
refreshes the page much more quickly, almost imperceptibly.
Doing a bit more research, and some experimentation with fiddler, it seems that window.location.reload() will bypass the cache and reload from the server regardless if you pass the boolean with it or not, this includes getting all of your assets (images, scripts, style sheets, etc) again. So if you just want the page to refresh the HTML, the window.location = document.URL will return much quicker and with less traffic.
A difference in behavior between browsers is that when IE9 uses the reload method it clears the visible page and seemingly rebuilds it from scratch, where FF and chrome wait till they get the new assets and rebuild them if they are different.
A difference in Firefox (12.0) is that on a page rendered from a POST, reload() will pop up a warning and do a re-post, while a URL assignment will do a GET.
Google Chrome does a GET for both.
Using JSF, I'm now having the issue with refresh after session is expired: PrimeFaces ViewExpiredException after page reload and with some investigation I have found one difference in FireFox:
Calling window.location.reload() works like clicking refresh icon on FF, it adds the line
Cache-Control max-age=0
while setting window.location.href works like pressing ENTER in URL line, it does not send that line.
Though both are sent as GET, the first (reload) is restoring the previous data and the application is in inconsistent state.
No, there shouldn't be. However, it's possible there is differences in some browsers, so either (or neither) may not work in some case.
from my experience of about 3 years, i could not find any difference...
edit : yes, as one of them here has said, only passing a boolean parameter to window.location.reload() is the difference.
if you pass true, then the browser loads a fresh page,
but if false, then the cache version is loaded...
In our case we just want to reload the page in webview and for some reasons we couldn't find out why!
We try almost every solution that has been on the web, but stuck with no reloading using location.reload() or alternative solutions like window.location.reload(),
location.reload(true), ...!
Here is our simple solution :
Just use a < a > tag with the empty "href" attribution value like this :
< a href="" ...>Click Me</a>
(in some cases you have to use "return true" on click of the target to trigger reload)
For more information check out this question :
Is an empty href valid?
window.location.href, this as saved my life in webview from Android 5.1. The page don't reload with location.reload() in this version from Android.
I'm trying to cache some documents client-side in order to switch between them faster.
The documents have been loaded in an iframe, so it's a question on how to cache it locally within the browser.
My method was to have a variable, item, and then do
if (item.cache) {
$('.holder', someElem).html(item.cache);
return;
}
item.cache = $('<iframe....');
$('.holder', someElem).html(item.cache);
However, this method keeps reloading the iframe src, when injected on to the holder.
Any good methods for client-side iframe caching?
The iframe doesn't actually trigger a page refresh until it has been added to the dom. I am guessing you keep an instance of the iframe but not add it to the dom until its time to see it. This method doesn't work well. I would suggest using css "display:none" to load it and hide and then show it when you need it.
HTTP has caching built in. Mark Nottingham has written a decent overview. Setting the Cache-Control and Expires headers should be enough for what you describe.
I have a Greasemonkey script which adds an iframe to the page (call it Page 1). The iframe contains another page (call it Page 2). The script runs on Page 2 as well. Pages 1 and 2 are on different domains.
I'd like to allow code running in Page 2 to call a function on Page 1. Given the lower restrictions on Greasemonkey code, is this possible?
The browser will prevent this, because the domains are different.
There are a couple of tricks you can use to communicate between frames:
Add a DNS record for the other website to the outer website's domain (www.somewebsite.com and someapp.somewebsite.com). Then use document.domain = "somewebsite.com" in both pages' JavaScript.
Use HTML 5 postMessage() to communicate between frames. I know it works in Firefox 3 and Internet Explorer 8, but not in IE7.
You can pass simple messages to another page by setting the parent window's URL.
Note: It appears browsers prevent setting of the parent URL. This method will this only work for one-way communication from parent to child frame.
Ad 3:
You won't be able to read the other frame's URL, but you can set it. If you change the URL to the exact same page, but with an #anchor component to the URL, the page will not actually reload:
window.frames["childFrame"].location.href = "http://www.somewebsite.com/#message"
You'd then need to add a script to the outer page that regularly polls it's location.href and process the messages. Yes, it's ugly, but if done right, it will work in all common browsers.