HTML cache version - html

You know how if you use
<script type="text/javascript" src="urlhere.js?version=1.0.0"></script>
the browser caches the javascript file and updates it when you give it a new version?
Is there a way to do that with the HTML code?
Because I want the browser to cache the HTML, but then update when the code is changed.
Is that possible?

The best way to handle caching would be at the server level, specifying two tags:
Expires
When the date specified has past, it tells the browser the content is no longer valid and it must be refreshed.
Cache-Control
Without involving the date, it lets the browser know how it should handling caching for the page.
Note: The browser should already take care of this as it (in the background) already looks at the last modified date of the file. However, the above methods are valid ways of overriding (extending) this kind of detection in places where the last modified date may not necessarily reflect change.

Related

How to test the case that HTML <object> (or a similar feature) is unsupported?

I'm writing a web page that has a HTML <object> in it, like
<object [...]>Your browser does not support this.</object>
On all my machines I only have up-to-date browsers installed and don't want to clutter my machines with old browsers (this is actually not easily possible in most cases without depending on third-party-software and/or doing hours of configuration tweaking).
I know of pages like https://www.browserstack.com/ that let you render websites, but this is rather time consuming when I frequently need to check loads of small changes. And honestly I actually don't want to give my data to external companies just for a simple rendering.
How can I easily check how my page would look on old browsers?
Just found it out. The content between the <object></object> tags is not only triggered in unsupporting browsers, but also when the data attribute holds an invalid target (like an unavailable file).
So, to test how it looks on unsupporting browsers, one can simply set the data-attribute to something unavailable. But keep in mind that the webdesigner then also has to define a more meaningful message than just "Your browser does not support SVG", but also has to consider that the object to display is simply missing (for example in a dynamic setting of the data attribute via PHP, like data=<?php echo getFile(); ?> when the function returns something undefined).

query parametar in image url

Is there a reason not to do this to force reload image in browser:
<img src="http://some.domain.com/the_image.jpg?v=3" />
The ?v=3 part, will it break somewhere?
This is perfectly valid and often used together with aggressive client side caching. You could for instance use this URL together and let clients cache the image for a year (as suggested by some RFC as maximum) and change the value as soon as the_image.jpg changes.
Note however, that it's recommended to change the path rather than the query string instead (say /3/the_image.jpg, or the_image-3.jpg). This is mainly due to some faulty implementations (e.g. proxies).

Can you use HTML5 local storage to send form contents "later"?

Let's say someone is writing a reply to an online forum on their iPhone when they lose connection.
Is it possible to use HTML5 local storage to save their submission and post it when they get connection back?
If so, how do I tell if the phone has a connection or not?
Yes you can by implementing your custom logic into the app.
To see if a connection is available you could either use navigator.onLine flag (but it seems that is not completely reliable):
Does Safari and/or WebKit implement the equivalent of window.navigator.online?
http://html5demos.com/offline
or try to load content from the internet and see if it's possible or not:
Checking online status from an iPhone web app
Could you not use JavaScript to set a variable and make it a string with the content of whatever the user puts in the box? You could use getElementById or similar to get the content from the form.
Then, store it in a "cookie". If you don't know how to do this, here is a quick run down on javascript cookies from w3: http://www.w3schools.com/js/js_cookies.asp
Then on page load you could have it load the cookie and make the value of the form equal to the variable you declared earlier.
The best approach (in the light of navigator.onLine behaving inconsistently in different browsers) would be to save whatever the user is typing to localStorage every few seconds or every few keystrokes.
If the page is reloaded again, then you can make sure to first see if there is anything stored in the localStorage key, and if so, then load that into the text box and the user can continue from where he left off.
You can also take a look at the 'going offline with web storage' section of this article http://dev.opera.com/articles/view/taking-your-web-apps-offline-web-storage-appcache-websql/

Spoofing HTTP-request Referrer from HTML?

Is there some secret and mystical way to change the value of my HTTP-request's referer, or at the very least, keep it from showing? Also, using a MitM page from another domain would not solve my issue, as you are now just submitting that other page's value.
This is not browser specific, I would need to do this on the HTML level.
The problem I am facing is a silent-login page where it sends an HTTP-Redirect to the http-Referrer, unless it is the same domain, or empty.
You can not control this on an html level. Your only option is to modify the login code to not issue the redirect or to direct it to the desired page.
It's an old question, but I know how you can do this. The first way is not guaranteed across all browsers, but you can use rel=noreferrer. AFAIK GC is the only UA to currently support this but it is in the standard. FX may also, IDK.
The second way is far more reliable, and it involves a cool little hack someone shared with me on IRC:
Basically, construct an iframe from a base64-encoded data: URI. The framed document is to have a script that listens for a window.postMessage() and when it gets fed the command with a URL to visit, it executes window.top.location = msg.data.URI or however it is that one reads the message. Sorry I can't recall, I haven't slept for a few days.
Enjoy if you still care.. :)

Is there a size limit to the amount of data returned by an Ajax Request?

I've been having this problem in the Chrome browser.
i use jquery's ajax post. Ajax is supposed to return a really long raw html.
When I do it in FF3 and IE8 it works fine. But in chrome the data seems to be truncated.
I do not have many details about the raw HTML, but I would like to share what I found to be true in the applications I worked on:
There is no limit to the amount of data you receive via AJAX request
However, if the amount of data being requested is very long it can time-out
If you are calling an entire HTML page, and it has script tags in the header, this can cause problems if you try to set it inside a div on the page itself. If this is the case, then set the script tags inside the body tag and it will work.
If this is not helpful, please feel free to provide a little more information about the raw HTML
As of what i know, there is limit of 4kb. However this is also browser-dependent.
It may also run into server-side size limits as well as client or server side time-out limits. Depending on the platforms and browsers these limits can be quite different for ajax requests than they are for standard browser requests too.
I would recommend that you use an iframe to contain the HTML, and use ajax to control the iframe's source. When you need to load the HTML, just have javascript point the iframe at a URL that will produce that HTML. This way you are only limited by the regular HTML request timeout and size limits, not the (sometimes) more restrictive ajax limits.