Is it possible to refresh an iframe whenever the page changes? (The page within the iframe - not the page the iframe is on) I want to have an iframe show a page which is being developed, then whenever the page is changed/updated I want the iframe to refresh so it shows the newer version. Hope that makes sense. :P
Or would it be better to use something else instead of an iframe? Are iframes outdated now?
Only because I find this interesting... using jQuery:
<iframe id="someiFrame"></iframe>
<script type="text/javascript">
var page = '/some/page/on/this/server.html', lM;
function checkModified(){
$.get(page, function(a,a,x){
var mod = x.getResponseHeader('last-modified');
if(lM != mod){
lM = mod;
$('#someiFrame').attr('src', page);
}
}
}
setInterval(checkModified, 5000); // every 5 seconds
</script>
That will poll the page every 5 seconds (incredibly wasteful but if it's on a local dev machine, so what?) and reload the iframe only when the page is updated :)
Note that the iFrame MUST be on the same domain as the parent page.
Do you have access to the page that's being modified? If so, why not just add a refresh meta tag to the page's HEAD that will then update your iframe at whatever interval you set. The following tag produces a 5-minute refresh and it won't matter if your iframe is cross domain:
<meta http-equiv="refresh" content="300" />
Related
Is there a way to refresh only a part of a website using ajax or a similar technique? The visitor must not notice the refresh.
What I want to do is refresh the <head></head> container of a website only one time after the website has been fully loaded using ajax?
Generally speaking, yes, you can modify <head> after the page has loaded. This can be used to quietly load remote scripts, or similar actions.
Without more specifics of what you're trying to do, here's some generic example code:
window.onload = function() {
//Send your ajax request, with success callback ajaxCallback
}
function ajaxCallback(response) {
//Parse response to create HTML tags you want inserted into <head>
var newHTML = response.newHTML;
document.getElementsByTagName("head")[0].appendChild(newHTML);
//If you want to completely replace the contents of <head>,
//you can use .innerHTML instead of .appendChild
});
I have a webpage that uses an iframe to embed another one of our websites. However, FireFox is having issues rendering the contents of the iframe. When I inspected the raw html that was in the DOM, I noticed the following DOM structure inside the iframe:
#document
<!DOCTYPE html>
<html>
<body></body>
<head> … </head>
<body> … </body>
</html>
Notice the body tag above the head tag - that's not in the source DOM! Removing it from within the developer tools fixes all of the rendering issues. For some reason, FireFox is adding a second body tag just before the head tag. Here is my puzzle:
The extra body is not in the source HTML being delivered
The extra tag only shows up in FireFox, Chrome and IE do not have it in there iframes
If I go straight to the url the iframe is loading in FireFox, the extra body tag is not there!
I have no addons - FireFox install is clean
I have the latest FireFox as of this post (v24.0)
Does anyone know what could be causing this? The site being embedded is really simple and does not have any javascript that could be adding this extra tag.
I don't know what causes this to happen in some FF iframes and not others, but if you have access that allows you to change the code of the page that is loaded into the iframe, you could add this script that removes the first empty body tag:
<script type="text/javascript">
var ffFixCount = 0,
clearExtraBody = function(){
var bodies = document.getElementsByTagName("body");
if(bodies.length > 1){
// assumes the empty, extra body tag you want to remove is the first one
bodies[0].parentNode.removeChild(bodies[0]);
window.clearInterval(ffBodyFixer);
}else{
ffFixCount++;
}
if(ffFixCount = 20){
window.clearInterval(ffBodyFixer);
}
};
//check for extra body tag will run every 100ms,
// 20 times, or, for 2 seconds (to give time for bug to happen)
// or will stop if extra body tag is found
var ffBodyFixer = window.setInterval(
function(){
window.clearExtraBody();
}, 100);
</script>
I'm using jquery mobile and I'm in dealing with a problem:
I have 2 html pages: index.html and page.html
//index.html
...
<script src="script.js"></script>
<body>
<div id='contents'></div>
</body>
...
//script.js
$(document).ready(function(){
$.ajax({
...
success:
$("#contents").html(content_to_display).trigger('create');
...
});
});
and another page that calls the previous
//page.html
...
<body>
Back
</body>
...
the problem is that when I click on the Back button (after refreshing the page.html), the page index.html is displayed correctly, except the that stays empty unless I manually refresh the page (F5 or Ctrl+R) displaying the content I want to be displayed.
how to load the index.html page without manually refreshing the page every time?
Refresh is your problem, this is a timeline of what have happened:
index.html is loaded
page is changed to page.html and its body content is loaded into index.html DOM but link is still domain/page.html
Because of full page refresh, page.html is reloaded without a HEAD content of index.html.
page is changed to index.html and its body content is loaded into page.html DOM WITHOUT its HEAD part and that is a reason why javascript is not triggered
This problem will be fixed if both index.html and page.html have identical HEAD content, mainly reference to the same custom js file. For more solution to this problem (with solution) take a look at this ARTICLE, to be more transparent it is my personal blog. Or it can be found HERE.
I think you are looking for something like:
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
}
this runs before the user is navigated away from the current page.
this means you can force the user to navigate to your page which will refresh correctly.
Try this instead of the backbutton if you are just navigating back one page:
BACK
Or give this a shot:
$.mobile.changePage(href, {changeHash: false });
I have a website with two pages. A and B. When you click on a link in page A, it will uses the Prototype Ajax.Updater() to load the link page (page B) into a div on the page (Page A).
When page B loads into page A, the sIFR replacements are not working and the tag inner text is not even showing.
I have tried doing a sIFR.redraw() when the page has loaded into the div, with no success.
When i view page B in the browser by itself, it works perfectly.
Is it possible to insert HTML into a DIV tag on a page using AJAX and have the sIFR display properly?
I would imagine that you probably need to re-initialise sIFR within the onComplete callback of Ajax.Updater
This is the way I ended up doing this
new Ajax.Updater('content', url, {
onComplete:function(){
sIFR.replace(font, {
selector: '#content h2'
});
}
});
You could put this snippet in your html code:
<script type="text/javascript">
function pageLoad(sender, args) {
sIFR.replace(font, { selector: '#content h2' });
}
</script>
It will run the sIFR replacements each time the page reloads. This is on normal PostBack and Ajax postbacks. Make sure you have included a ScriptManager instance on your page.
mathijsuitmegen:
Your solution worked perfectly on an application I'm using where the ScriptManager was already in use.
Infact, The function was simply slotted into my sifr-config.js file and worked perfectly meaning my HTML wasn't cluttered.
How can I implement showing "Generating data... please wait" information to a web browser from a web application (if data is not cached it can take some time to generate response), with and without JavaScript (AJAX)?
I am interested both in solution using AJAX (where I can replace loading message using JavaScript), and in solution using only server process, without JavaScript (if possible).
I'd like to replace loading message with response as soon as it is available.
Here's what I would do in implementing this client side.
This would be quite easy to accomplish using an Ajax call. Set a div on your page to show the "Generating... please wait" message when you first make the Ajax call. (A simple unimaginative animated graphic would suffice to cue the user's expectation of a pending operation. Convention = understanding = good interface.) Then pass a function into the readystatechange handler that updates the div with the message/progress graphic once the Ajax request returns.
function ShowPendingOperation(){
var resultHolder = document.getElementById( 'statusDiv' );
resultHolder.innerHTML = "Your data is loading... <img src='yourProgressAnim.gif'>";
var request = GXmlHttp.create();
request.open("post", "/yourScript", true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = function() {
if (request.readyState == 4) {
resultHolder.innerHTML = "operation complete";
resultHolder.innerHTML += "result1";
resultHolder.innerHTML += "result2";
resultHolder.innerHTML += "etc";
}
}
request.send( 'field1=data1&field2=data2' );
}
Note the snippet above is drawn from sample code written for a Google Map site, presumably your line creating the XMLHttpRequest object will vary...
You would need to use JavaScript to accomplish this without reloading the page. Here's a sample of using jQuery to create this type of effect.
http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/
The only way you could do this from the server side would be to show the message on the page you're POSTing to and write to the screen using a buffered output before you do the actual processing.
Here's what I would do:
When you determine that you have to perform a long operation, start a thread and associate that thread with an ID of some sort. Do not re-use the IDs.
Return the user to a page that says "Generating".
If ajax, use ajax to periodically poll the server or to perform a request that will block until the operation completes. This request has the ID in it and that is how the server knows what message to return.
If no ajax, use a meta-refresh to periodically reload the page with the specified ID. Repeat until the transaction is done. Note: in this case you should put a message on the page indicating when the refresh will happen and include a link to reload the page for people whose browsers don't support (or ignore) meta refresh.
JqueryUI's Tabs plugin has this built in, you could easily tie into their plugin to do what you want without having to write it yourself.
Without script: You could redirect to an intermediate web page with a "please wait" message that redirects to the result page when the process is complete.
With script: Your page could have a hidden div that shows up with a "please wait" message. That div could also be as big as your page and transparent (with the message in a smaller div) so that your users cannot click on the page while the message is displayed.
One of the trick I have found is to use <meta http-equiv="refresh" content="0" /> to redirect to ready view... but not closing html tag and not closing connection till the final response is ready:
print <<'EOF';
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0"/>
<title>$title</title>
</head>
<body>
EOF
print "Generating...";
while (!is_ready()) {
print ".";
wait();
}
print <<EOF;
</body>
</html>
EOF
Is that something that has the chance of working, or does it work only by accident?