JavaScript - Refresh Iframe [no, This One Is Different!]

Alright I have an Iframe, and at the end of that Iframe I have set a variable with JS to be equal to TRUE, indicating that the page has run through the script.
I then check that the iframe from the parent window for that variable, if it has not been set yet (or does not equal true) it reloads the iframe.

The code works fine FF and Opera. However in IE it does not reload the frame if it is not true, and in Chrome it alerts undefined and does not reload the frame.

I have tried accessing the frame through the dom and it did not work for me, and i have also tried simply adding a tail to the iframes source with no success.

PHP Code:
<iframe name="ifrOne" src="iframe.htm" id="ifrOne"></iframe>
<script type="text/javascript">
function frameLoad()
{
var testOne = window.ifrOne.test_var; 

if(testOne !== "TRUE")
{
alert(testOne);
document.getElementById('ifrOne').contentDocument.location.reload(true);
window.frames['ifrOne'].location.reload(true);
}
}
</script> 

hi there. i have a classic asp page that is using the winhttprequest object to get the contents of website from a different server. Then i modify the html i get to suit my needs.. save it to a file, and then finally, i display this stuff in an IFRAME.

(i wrapped a div tag around the iframe so technically, i'm doing something like: "divtabframe.innerHTML = '<IFRAME SRC='myserver/somepage.html'></IFRAME>)

My problem is that when i refresh the main page, i want the iframe to also display the latest data. It does get the latest data from the external site and its saved in "somepage.html". But the iframe isn't updated unless i explicitly right-click inside the frame and manually select refresh.
I have added a <meta http-equiv="refresh" content="30"> line to make it auto refresh on it's own.
But the users find it annoying that the page refreshes while they're reading it. It would be ideal if when they refresh the main page, the iframe gets updated too. or i could create a new button too... as long as both pages are updated

i did find this solution on a different website:
document.getElementById(FrameID).contentDocument.location.reload(true);

My page inside the iframe is ultimately "local" so it sounds like the above code should work, but i'm not sure what event would be best to trigger this javascript... and i still need a way to refresh the main page too.

thanks.

I am building a webpage to make my life easier at work. In the page i am simply loading 3 different web pages that i use 100% of the time between each other, and since they are little tools and i can fit them all nicely in one.

However, i'm having a problem doing it with the most important one.

I've included all 3 pages via iframes, but the third page doesn't work and becomes the topmost every time.

This is because this web page uses the Javascript code snipset below in their page:
----------------------------------------
if (top.location != self.location) {
top.location = self.location.href;
}
----------------------------------------

Please advise me if you have any solution for that.

Many thanks,

Arch,

i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine.

the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same??

this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state.

I don't want the city option to change upon a normal page refresh. how do I go about this?

below are the city, hotel select options & iframe
Code:

    <form name="hotelslist" id="hotelslist">
        <select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();">
          <option value="Baddeck">Baddeck</option>
          <option value="Banff">Banff</option>
        </select>
    <select id="hotelnames" name="hotelnames" onChange="loadHotel();">
          <option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option>
        </select>
      </form>

<iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>

below is my javascript functions
Code:

function loadHotel() { 
    var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value; 
		window.frames["hotelframe"].location = destURL; }

var i;
function hotel_list(i){
var hotelslist = document.getElementById("hotelslist");
	hotelslist.hotelnames.options.length=0;
	
switch(i)
{	
case 0: //Baddeck
hotelslist.hotelnames.options[0] =new  Option('Inverary Resort, Baddeck','http://www.test0.com');
break;
case 1: //Banff
hotelslist.hotelnames.options[0] =new  Option('Banff Caribou Lodge & Spa','http://www.test1.com');
hotelslist.hotelnames.options[1] =new  Option('Banff Ptarmigan Inn','http://www.test2.com');
hotelslist.hotelnames.options[2] =new  Option('Banff Rocky Mountain Resort','http://www.test3.com');
hotelslist.hotelnames.options[3] =new  Option('The Rimrock Resort','http://www.test4.com');
hotelslist.hotelnames.options[4] =new  Option('Fairmont Banff Springs','http://www.test5.com/');
break;
}
}

can some one please advise on a cross browser solution?

thanks in advance.
Omar.

Okay, I'm trying to refresh my iframe ads, 3 of them.

The code works, its just making the functions work "per" ad.
When it refreshes, it changes "all" ads, I want them to refresh at different RATE


Code:

function reloadFrames(first, refresh){delay = 0.2; //minutes to delay the refresh 
max_refreshes = 3; if (max_refreshes > refresh){refreshed = refresh + 1;setTimeout("reloadFrames(false, refreshed)", delay*60*1000); if (!first) {ads = document.getElementsByName("ad");for(var i=0; i<ads.length; i++) {ads[i].src = ads[i].src;}}}
}
function reloadFrames2(first, refresh){delay = 1; //minutes to delay the refresh 
max_refreshes = 3; if (max_refreshes > refresh){refreshed = refresh + 1;setTimeout("reloadFrames(false, refreshed)", delay*60*1000); if (!first) {ads = document.getElementsByName("ad2");for(var i=0; i<ads.length; i++) {ads[i].src = ads[i].src;}}}
}
function reloadFrames3(first, refresh){delay = 1.4; //minutes to delay the refresh 
max_refreshes = 3; if (max_refreshes > refresh){refreshed = refresh + 1;setTimeout("reloadFrames(false, refreshed)", delay*60*1000); if (!first) {ads = document.getElementsByName("ad3");for(var i=0; i<ads.length; i++) {ads[i].src = ads[i].src;}}}
}

ad codes:

Code:

<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="728" height="90" src="http://ad.103092804.com/st?ad_type=iframe&ad_size=728x90&section=656647" name="ad"></iframe> 

<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="120" height="600" src="http://ad.103092804.com/st?ad_type=iframe&ad_size=120x600&section=656647" name="ad2"></iframe>

<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="160" height="600" src="http://ad.103092804.com/st?ad_type=iframe&ad_size=160x600&section=656647" name="ad3"></iframe>

Is this possible to get each iframe to refresh at a different rate, or even combine the functions into one?

I dont code much javascripts.

Thanks
-Tim

Hey,

I have two iframes like this:

iframe1 = chat window
iframe2 = form to enter text to chat

Now currently i have iframe1 with a meta refresh on every 1 second. But i've seen live chats before with JS which are not refreshing the page all the time or so it appears...what i mean by this as the meta refreshes the first iframe my browser shows a status bar and loading symbol on firefox, but an old js chat i saw which wasn't free script didn't do this it was pure smooth and didn't look like it was refreshing all the time even if it was it hid it well.

How was that done because my method sucks incomparison with make a live chat look "live".

Hope you can help me.

Hi,

I have the below code:
Code:

<script type="text/javascript">
function loadQuickMessageCheck(File,ID){

var xmlhttp; 

if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
	 eucalyptus = setInterval(function(){loadQuickMessageCheck(File,ID)},20000);
    }
  }

xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>

But I am overloading the server and crashing it. I've googled the issue and have found people with similar problems who talk about the need to cancel the last refresh request before they send the next refresh.

I even found this nice piece of code which worked for someone else.
Quote:

try{window.clearTimeout(tRefresh)} catch(err) {}
tRefresh = setInterval(setContext, varInterval*60*1000);
}
I am not sure if this is the solution that I am looking for but if it is all my attempts at applying this code has been a bit of a disaster.

Hi all,

I hope you can help

I have some code which:

1) Opens a URL (e.g. google.com) in a hidden iframe, then
2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded...

This works exactly as I need.

What I'd like to do is the following:

1) Open a URL (e.g. google.com) in a hidden iframe, then
2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe
3) The address bar of the full-screen iframe should be my domain (obviously!)

Here's what I have so far...

Hidden iframe -> New URL Code:

Code:

<html>
<body>
	<script type="text/javascript">

		var page_body = document.getElementsByTagName('body');
		var myframe = document.createElement('iframe');
		var id = Math.random();
		myframe.setAttribute('id', 'myFrame'+id);
		myframe.src = 'http://google.com';  //First open Google in hidden iframe 
		myframe.setAttribute('frameborder', '0')
		myframe.setAttribute('width', '0');
		myframe.setAttribute('height', '0');
		if (myframe.attachEvent)
			{
				myframe.attachEvent('onload', function()
					{
						top.location = 'http://yahoo.com';  //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html 
					});
					}
		else if (myframe.addEventListener)
			{
				myframe.addEventListener('load', function()
					{
						top.location = ('http://yahoo.com');
					}, false);
					}
		page_body[0].appendChild(myframe);

	</script>
</body>
</html>

I have an example of some code which displays the full screen iframe, but my problem is...

...I can't figure out how to redirect to this after the hidden iframe has loaded

Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded:

Code:

<html>
<head>
	<script type="text/javascript">
 		function sendParams() {
 			document.body.style.overflow = "hidden";
 		}
	</script>
</head>
<body>
	 <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> 
	<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>

I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas.

If you can help, you'll have some serious gratitude and good karma thrown your way!

Best wishes, and thanks in advance,
Paul

Hi there everybody,
I've got this problem which I can't solve myself...

I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe.

Unfortunally I can't get this to work... Will somebody please help me?

Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.

Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.
We have a central area which can be longer or shorter depending on the forum.

I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html
it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page:
http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html
which is not very clean at all, this is the javascript that i found that at least works:

Child iframe script:

Code:

<script type="text/javascript">
(function(){
	var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + qstr;
	}
})();
</script>

Parent iframe Script:

Code:

<script type="text/javascript">
(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}
	var f = getQval('frame'), s = getQval('src');
	if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
		frames[f].location.href = s;
	}
})();
</script>

Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance.

Hi,

Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks.

I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that.

This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox):

Code:

function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}

Is it possible?

Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem:

I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix:

Code:

<script>
// No redirection! 
var prevent_bust = 0  
window.onbeforeunload = function() { prevent_bust++ }  
setInterval(function() {  
  if (prevent_bust > 0) {  
    prevent_bust -= 2
    window.top.location = 'http://www.mysite.com/my404.html'
  }  
}, 1)
</script>

What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html.

Is there another solution for me so that the page within the iframe cannot redirect the parent page?

Hello....

I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first.
Code:

 <div id="top-navigation" title="top-navi">
        <ul><li id="homePageLink" class="first">
                  <a  id="homePageTab"  class="navigation-font" href="</a>
              </li>
        </ul>
  </div>

In the above code how can i change the class="navigation-font" from the first iframe?

Please help....