JavaScript - Iframe Nightmare

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....

Hi

I have a page with 3 iFrames, showing different content.

iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2
iFrame2: Here is a list of items from a database.
iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A).

When the (A) php page loads, it should reload iFrame2

I have tried to put something like:
<body onLoad=parent.location.reload()>
and put it on the (A) php page.

This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload...

So, I was looking for the right code to put, like onLoad=iFrame2.location.reload()

However, I can't seem to find the correct code, so I hope any of you can help me...

Hello,

I've lately brought a new search engine scirpt however I was wonder how i could grap what ever the url is being viewed in the iframe, in order to create a hyperlink button which wil take the user to what ever is displayed in the iframe, but without my frame?

Very simplilar to the 'remove frame' link that google images has on it's search result pages.

I firstly thought that a PHP code would have being able to do this. However after being told my a number of PHP experts I relised that Java was the way forward.

Therefore I would love any help what so ever in help me to carry out this task. I've attached the search page from my site with the iframe located. However i've had to change the file from PHP to txt.

Many Thanks

Hi

Am new to javascript. I have a requirement where user clicks on a image which should direct to iframe. Please follow 2 scripts and please advice how to open iframe link instead of link in window.open

Image code:

<img src = "../samples/images/Edit3.png" alt = "Edit Status" height = 13 width = 13 onclick = "window.open('../cgi-bin/cognos.cgi?b_action=cognosViewer&ui.action=run&ui.object=%2fcontent%2ffolder%5b%40name%3d%27NARM%27% 5d%2fpackage%5b%40name%3d%27TM1_NARM_RISK_DASHBOARD_CREDIT_FINANCE%27%5d%2ffolder%5b%40name%3d%27Cre dit%20Finance%20Overlay%20Reports%27%5d%2freport%5b%40name%3d%27%23%2060%2b%20Rate%27%5d&ui.name=%23 %2060%2b%20Rate&run.outputFormat=&run.prompt=true','KPIDetail','width=600,height=350,scrollbars=yes,left=300,top=300')">

Iframe code:

<iframe
src="http://tm1lab.us.hsbc/TM1Web/TM1WebMain.aspx?AdminHost=tm1lab.us.hsbc&TM1Server=narm_risk_dashboard&action=OpenObject&type=Webshe et&value=Applications/CF_Commentary/H60Rate" width="100%" height = "100%" scrolling=no >
</iframe>

Hello Experts

I need your advice. I dont know if this is the write place to post my query. But I have an assignment due today. I have got everything working except an iframe that is driving me nuts.

the question on the assignment asks to insert a command to write the HTML code
<iframe src='weekday.htm'></iframe>
to the webpage where weekday is the text string returned by the weekDay() function.

The iframe should display the daily schedules that are stored in the sunday.htm through saturday.htm file.

The weekDay() function is located in an external .js file that I have already linked to my webpage.

Another thing is there is no weekday.htm file instead there are files sunday.htm through saturday.htm that have the daily schedules to de displayed in the iframe.

I know that I should some link the weekday.htm file to the weekDay() function. This is what I have done so far:

<h2 id="title">Today at the Union</h2>

<p>
<script type="text/javascript">
/*
Dispaly the daily schedule in an inline frame.
Display schedules are stored in the files
sunday.htm through saturday.htm
*/

<iframe src='weekday.htm'>

var weekday = weekDay();
document.write(weekday);
</iframe>
</script>
</p>

Please advice as to how to get this thing working. I am not an expert( I am still learning.) I tried my best (spent several hours breaking my head on this). So any help is much appreciated.

Thank you for your time

does not work in iframe, the error described he

http://groups.google.com/group/ie7-j...73a3e?lnk=raot

if I do correction as suggested then the error dissapears, but does not work (hover).

Anyone found solution for that ?

Above is the image of my situation, what I need is for the captcha's to be loaded perfectly and displayed to the user as shown in the image with the green box around it, I currently have a script to set focus to the text field however it is kind of messy for some reason and ends up leaving it looking like the frame in the red box in the image.

Here is what I have been using:
Code:

if (( document.URL.indexOf("cast_skills") != -1 ) || ( document.URL.indexOf("security_prompt") != -1 ) || ( document.URL.indexOf("joinraid") != -1 )){

	if ( document.forms.length > 0 ) {

		document.forms[0].elements[1].focus();

	}

}

This works fine since on each of the pages it is required there is only 1 form. However when loading smaller frames it causes some problem.

The next question I have to ask is, is it possible to have a script that when the enter key is pressed inside frame 1, automatically move the focus on to the text field in frame 2? Noting that the page inside the frames is not my own and I cannot do anything with it.

Any help would be appreciated with this matter,
Many thanks.

Hello,

If JavaScript is disabled, does the content in an iframe become un-viewable/ blocked? This is in general, regardless of how safe or trusted the website/ content is.

Code:

<html>
<head>
<noscript>Javascript is disabled.  Having it enabled provides the greatest functionality.</noscript>
</head>
<body>
<noscript>Javascript is disabled.  Having it enabled provides the greatest functionality.</noscript>
<iframe src="first.html" width="300" height="300"  />
</body>
</html>

I have an iframe. I load a page within it. The page I load is a php page that I build with a table with the id of 'readmail_table'.

My iframe is 'readmail_frame'. Someone clicks on a message title outside of the iframe and I load the contents of the message in the iframe from the database in my table. Sometimes this takes longer than others depending on how large the message is. What I am doing here is letting the contents load then calculating the width and height of the table and then increasing the iframe's size so there are no scrollbars. This works 98% of the time but I ran into an issue where the table does not exist yet in the iframe and the JS code errors out. So what I did then was add a local var, set it to false then had a while loop check for the table and once it finds it, set the var to false and run my code. Again, mixed results. Sometimes this works then others I get that the table id I am looking for is null but my if statement in the while loop is checking to see if != null

line 159 is where it is breaking
The error I am getting in firebug is
Code:

window.frames.readmail_frame.document is null
Line 159

Code:

156 var temp = false;                                                                                                                               
157 while ( !temp )                                                                                                                                 
158    {                                                                                                                                            
159    if ( window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ) != null )                                                 
160       {                                                                                                                                         
161       //height of the table that holds the actual message                                                                                       
162       var tempheight = window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ).clientHeight;                              
163       //height of the from, to, subject and date section                                                                                        
164       var tempheight2 = window.frames[ "readmail_frame" ].document.getElementById( 'readmail_heading' ).clientHeight;                           
165       var tempwidth = window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ).clientWidth;                                
166       document.getElementById( 'readmail_frame' ).style.width = tempwidth + 'px';                                                               
167       //add up the table for the message, table for from, to, date and icon for print and some extra to ensure enough room                      
168       document.getElementById( 'readmail_frame' ).style.height = ( tempheight + tempheight2 + 130 ) + 'px';                                     
169       temp = true;                                                                                                                              
170       }                                                                                                                                         
171    }

I have also tried

Code:

if ( window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ) )

and

Code:

if ( window.frames[ "readmail_frame" ].document )

Like I said, most of the time this works exactly how I need it. I just need a fool proof way to determine that this table is in fact on the page. I am not sure why it works sometimes and not others since I am looping until it is there

Thank you for any help with this.

This works on one of our other sites, but today I noticed this site is having a problem, its just not refreshing at all... here is the code..

(what is used on the iframe)
Code:

<iframe id="ad1"

whats in the header (besides the including of the js file)
Code:

<script type="text/javascript">
var imageIntervals={};
var imageLimit={};
var imageCount={};
</script>

and the actual script
Code:

function toggleImage(id) {if(imageCount[id]<imageLimit[id]||imageLimit[id]<0) {var img=document.getElementById(id);img.src=img.src;imageCount[id]++;}else {clearInterval(imageIntervals[id]);}}
function setImageInterval(id, ms, limit) {imageIntervals[id]=setInterval("toggleImage('"+id+"')", ms);imageLimit[id]=(limit!==undefined?limit:-1);imageCount[id]=0;}
/* IFERAME RATES */
window.onload=function() {
    setImageInterval("ad1", 72000, 4);
    setImageInterval("ad2", 60000, 4);
    setImageInterval("ad3", 66000, 4);
    setImageInterval("ad4", 72000, 4);
    setImageInterval("ad5", 72000, 4);
    setImageInterval("ad6", 76000, 4);
}

This should work, but its not so trying to see if you can see something I dont. If theres a better iframe refresh script out there that can do different intervals, please share. Thanks

Ok so I'm playing around with writing scripts reading through JavaScript: The Definitive Guide and I'm on the Section "Relationships Between Frames".

All i'm trying to do is change the background color of the <div id=iframewrap> element, which is inside the iframe, by clicking on the paragraph that says "Click Me", which is inside the iframe's parent window.

I have everything I tried below along with the error message recieved by firebug.

I Cant figure it out.

HTML
Code:

<p>Click below to change the style of the iframe</p>
<p style="color:blue" onClick="chngFrameStyle()">Click Me</p>

<iframe id="fone" name="fone" src="OreillyCh14v2Iframe.html" width="50%" height="400px" ></iframe>

The iframe
Code:

<div  id="iframewrap" >
<h1>Iframe Window</h1>
<div id="iframeparagraph"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa 
<strong>strong</strong>. Cum sociis natoque penatibus 
et magnis dis parturient montes, nascetur ridiculus 
mus. Donec quam felis, ultricies nec, pellentesque 
eu, pretium quis, sem. Nulla consequat massa quis 
enim. Donec pede justo, fringilla vel, aliquet nec, 
vulputate eget, arcu. In enim justo, rhoncus ut, 
imperdiet a, venenatis vitae, justo. Nullam dictum 
felis eu pede <a class="external ext" href="#">link</a> 
mollis pretium. Integer tincidunt. Cras dapibus. 
Vivamus elementum semper nisi. Aenean vulputate 
eleifend tellus. Aenean leo ligula, porttitor eu, 
consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
dapibus in, viverra quis, feugiat a, tellus. Phasellus 
viverra nulla ut metus varius laoreet. Quisque rutrum. 
Aenean imperdiet. Etiam ultricies nisi vel augue. 
Curabitur ullamcorper ultricies nisi.</p></div>
</div>

JavaScript
Code:

 function chngFrameStyle() { 
	/*
	  var frameone = window.frames['fone'];
	 frameone.document.getElementByID("iframewrap").style.backgroundColor = "#444";
	 frameone.document.getElementByID("iframewrap").style.color = "white"; 

	 Didn't Work :-{

	 Firebug Error: frameone.document.getElementByID is not a function
	 */

	/*
	  window.frames[0].document.getElementByID("iframewrap").style.backgroundColor = "#444";
	 window.frames[0].document.getElementByID("iframewrap").style.color = "white"; 

	 Didn't Work :-{

	 Firebug Error: window.frames[0].document.getElementByID is not a function

	 */

	/*
	  var iframeone = document.getElementById("fone");

	 iframeone.document.getElementByID("iframewrap").style.backgroundColor = "#444";
	 iframeone.document.getElementByID("iframewrap").style.color = "white"; 

	 Didn't Work :-{

	 Firebug Error: iframeone.document is undefined
	 */

	/*
	  frames[0].iframewrap.style.color = "white";
	 return; 

	 Didn't Work :-{
	 Firebug Error: frames[0].iframewrap is undefined
	 */

 };