...

View Full Version : need a suggestion regarding loading external data into an iframe



canadianjameson
07-06-2007, 05:36 PM
Hi,

Here be the scenario: I have a page that I want to be able to load external .htm files into a specified area onto this site. These pages will all be on the same domain to avoid security concerns.

My initial approach was to use a div toggler but the community organization who I'm making this page for won't have the technical knowledge required to edit the text if it it all housed in divs on the same page. They wish to have separate .htm files for each 'page', but they don't want to refresh the entire page every time a link is clicked -- i figure this means that I need to use an iframe, but please suggest other ideas if they are simpler.

For some reason, and I am still trying to figure out why, I can't position the iframe properly. I think what's messing me up is that some of the display properties are housed in the iframe tag itself, and others I have in my css file. Can someone please have a look at this and try to position it properly or at least direct me to the appropriate area?

Alternatively if there is a simpler / cleaner way to do this please suggest it.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main.css" type="text/css">

<script type="text/javascript">

/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["contentarea"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

</head>

<body>
<div id="pageContainer">
<div id="topBorder"><img src="images/head&hands_color.gif"></div>
<iframe id="contentarea" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:500px; display:none"></iframe>
<div id="links_BW">
<a href="javascript:loadintoIframe('contentarea', 'test.htm')"><img src="images/logoButtons/info_BW.jpg" id="info_BW"></a>
<img src="images/logoButtons/YPP_BW.jpg" id="YPP_BW">
<img src="images/logoButtons/social_BW.jpg" id="social_BW">
<img src="images/logoButtons/med_BW.jpg" id="med_BW">
<img src="images/logoButtons/legal_BW.jpg" id="legal_BW">
<img src="images/logoButtons/J2K_BW.jpg" id="J2K_BW">
<img src="images/logoButtons/street_BW.jpg" id="street_BW"> </div>



</div>

</body>
</html>




/* CSS Document */
* {
padding: 0;
margin: 0;
outline: 0;
}
html, body {
height:100%;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 11px;
font-weight: bold;
}
* html #pageContainer {
height:100%;
}
* img {
border: 0
}
#pageContainer {
min-height: 100%;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#topBorder {
position: relative;
display: block;
margin-top:75px;
margin-left: 75px;
}
#links_BW {
float: left;
position: absolute;
display: block;
margin-left: 75px;
margin-top: 25px;
width: 70px;
}
#contentarea {
z-index: -1;
clear: right;
float: left;
position: relative;
margin-left: 150px;
margin-top: 25px;
border: 1px solid black
}
/*#info_BW, YPP_BW, social_BW, med_BW, legal_BW, J2K_BW, street_BW {
padding-bottom: 15px
} --- I may want to do this later but for now it is doing it on it's own...*/

i put it up here for viewing purposes: www.enviromark.ca/head/

_Aerospace_Eng_
07-06-2007, 05:57 PM
The iframe isn't in the link you post. Since you float your navigation to the left, your iframe needs to come after the navigation. As to the page not refreshing, I guess you could use ajax but if the user has JS disabled then they will be stuck with a page refresh. http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

canadianjameson
07-06-2007, 06:00 PM
i got some results by adding this, but the iframe still wont display beside the black and white images



<iframe id="contentarea" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:500px; display:none"></iframe>
<div class="clear"></div>
<div id="links_BW">

canadianjameson
07-06-2007, 07:24 PM
Hi Aero, I think i posted my last comment right after you did :)

Thank you for that link, i had tried it before without success, but I gave it another shot and managed to make it work :)

There is just one odd little thing occurring... The stylesheet I am using for the main page is affecting the text attributes of the .htm file being loaded into the div. I wish to prevent this because i will be creating a standardized css file for all of the .htm files to be loaded, and I don't want to have to worry about changes I make to the main.css file affecting the pages loaded in the div.

How would I go about preventing this?

index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main.css" type="text/css">

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

/*
<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
<div id="logoC"></div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
*/
</script>

</head>

<body>
<div id="pageContainer">
<div id="topBorder"><img src="images/head&hands_color.gif"></div>
<div id="links_BW">
<a href="javascript:ajaxpage('test.htm', 'contentarea');"><img src="images/logoButtons/info_BW.jpg" id="info_BW"></a>
<img src="images/logoButtons/YPP_BW.jpg" id="YPP_BW">
<img src="images/logoButtons/social_BW.jpg" id="social_BW">
<img src="images/logoButtons/med_BW.jpg" id="med_BW">
<img src="images/logoButtons/legal_BW.jpg" id="legal_BW">
<img src="images/logoButtons/J2K_BW.jpg" id="J2K_BW">
<img src="images/logoButtons/street_BW.jpg" id="street_BW">
</div>
<div class="clear"></div>
<div id="contentarea"></div>
</div>
</body>
</html>


test.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div align="center">
<p><font size="+5">test test test</font><br>
<br>
<br>
<img src="file:///E|/sites/FV%20Jones/images/globe.gif">
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>heyeheye </p>
</div>
</body>
</html>


main.css


/* CSS Document */
* {
padding: 0;
margin: 0;
outline: 0;
}
html, body {
height:100%;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 11px;
font-weight: bold;
}
* html #pageContainer {
height:100%;
}
* img {
border: 0
}
#pageContainer {
min-height: 100%;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#topBorder {
position: relative;
display: block;
margin-top:75px;
margin-left: 75px;
}
#links_BW {
float: left;
position: absolute;
display: block;
margin-left: 75px;
margin-top: 25px;
width: 70px;
}
#contentarea {
position: relative;
margin-left: 155px;
margin-top: 27px;
margin-right: 150px;
border: 1px solid black;
}
/*#info_BW, YPP_BW, social_BW, med_BW, legal_BW, J2K_BW, street_BW {
padding-bottom: 15px
} --- I may want to do this later but for now it is doing it on it's own...*/



oh, lastly, what does this mean?
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)

(as per usual the link is up and is www.enviromark.ca/head/

_Aerospace_Eng_
07-06-2007, 07:41 PM
Just look at the other ajax scripts from dynamic drive. That last line tells the browser whether or not to use a cached page.

canadianjameson
07-06-2007, 09:49 PM
Thanks Aero, everything seems to be working spectacularly



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum