[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript Auto Height for iFrame acting strange

Posted on 2009-04-21
2
Medium Priority
?
381 Views
Last Modified: 2012-05-06
If found some code that would make an iframe I am working on auto size it's height and make the scroll bars disappear.  Here is the link for the tutorial I found:
http://lib.mobius.tw/jquery/myplugin/iframe_autoHeight/api.htm
However, it only works if the iframe url is the same domain as the source url.  I don't see anything in the Javascript code requiring the same domain.  Furthermore, in this example I created, it mysteriously puts two copies of the links: page 1, and page 2, even though when I view source on both source and iframe it only exists once.  Here is the autoHeight function in Javascript, and here are my HTML examples.  
http://www.sportsbuff.com/white/demo_frame_test.html
Thanks!
function doIframe(){
	o = document.getElementsByTagName('iframe');
	for(i=0;i<o.length;i++){
		if (/\bautoHeight\b/.test(o[i].className)){
			setHeight(o[i]);
			addEvent(o[i],'load', doIframe);
		}
	}
}
 
function setHeight(e){
	if(e.contentDocument){
		e.height = e.contentDocument.body.offsetHeight + 35;
	} else {
		e.height = e.contentWindow.document.body.scrollHeight;
	}
}
 
function addEvent(obj, evType, fn){
	if(obj.addEventListener)
	{
	obj.addEventListener(evType, fn,false);
	return true;
	} else if (obj.attachEvent){
	var r = obj.attachEvent("on"+evType, fn);
	return r;
	} else {
	return false;
	}
}
 
if (document.getElementById && document.createTextNode){
 addEvent(window,'load', doIframe);	
}

Open in new window

0
Comment
Question by:Thread7
2 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 1500 total points
ID: 24210398
> However, it only works if the iframe url is the same domain as the source url.
> I don't see anything in the Javascript code requiring the same domain.

It's not working because of a security restriction. More information: http://en.wikipedia.org/wiki/Same_origin_policy


> Furthermore, in this example I created, it mysteriously puts two copies of the links: page 1, and page 2

That's because their targets are set to the iframe, so you get 3 documents showing instead of just 2.
0
 
LVL 1

Author Closing Comment

by:Thread7
ID: 31573074
Npt sure if this was reallly the answer.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question