Iframe loading script

**stefaneh** · 07-17-2007, 08:15 PM

Hello,

I am looking for a script which shows that the iframe page is loading. As have an iframe which content is quit large so the problem I have you open the site and see almost noting until the iframe is loaded. I like to put something there like a loading script like a script you see in flash or even some text

Any idea

Thanks

Stefan

**djr33** · 07-18-2007, 04:59 AM

I can think of a couple approaches:

1. Do something to the included page. Load the image, or whatever it is, into javascript and replace the original content of the page (ie a loading message) with this content.

2. Create a script on the main page that displays "loading" somewhere on the main page. Note that this will need to go on the main page, not in the iframe.
Once the content is loaded in the iframe, use <body .... onLoad="something()">, and communicate to the original script that it can stop saying loading.

Alternatively, you could try to show loading in the place where the iframe is, and then change the iframe (originally hidden) to visible.

3. You could try to place content that says "loading" under the iframe, and have the iframe transparent. I'm not sure if this is possible, but it would be fairly easy if it worked. Look into iframe CSS properties and do some tests. If you can make it transparent, then simply have text or an image of "loading" under it (in a div, for example, as the background), then this will be covered once the iframe loads.
You could try a similar approach in the iframe itself, using "loading" as the background to then be covered up by the image that is loading, etc.

**stefaneh** · 07-18-2007, 01:09 PM

Thanks for the answer. The iframe I am loading I can not edit its not my content so I try your number 2 approach. I was hoping you can point me in the direction where I can get like a scpit you see as no the Firefox tap ( spinning circle ) or like a % numbers like on ( www.boulderinvest.com)
Thanks

Stefan

**stefaneh** · 07-18-2007, 03:19 PM

I found a small script uploaded the flash and JS but now the preloader, no% indicator is just spinning and the ifame will not load at all. Sorry I am just not so familiar with this kind of code. I copy the code I have below. Thank you Stefan

Code:

 <div id="mainContent"  align="center" >
   
    <table width="100%">
      <tr>
        <td><div align="center">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent2.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
			'width', '300',
			'height', '300',
			'src', 'DSCRIPTS Preloader 2',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'DSCRIPTS Preloader 2',
			'bgcolor', '#ffffff',
			'name', 'DSCRIPTS Preloader 2',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'DSCRIPTS Preloader 2',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="300" height="300" id="DSCRIPTS Preloader 2" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="DSCRIPTS Preloader 2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="DSCRIPTS Preloader 2.swf" quality="high" bgcolor="#ffffff" width="300" height="300" name="DSCRIPTS Preloader 2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</noscript>
            <iframe id="myframe"

**djr33** · 07-18-2007, 03:23 PM

It's very difficult to get a percentage as that requires knowing how much data has been transferred to the user, especially when you don't really have access to the page anyway.

Using a rotating graphic is easy enough; just find one or make one.

After a google search, it seems that the onLoad property can be used for an iframe.
<iframe onLoad="javascript_here">
That seems like something worth looking into.

**jscheuer1** · 07-18-2007, 03:29 PM

You could do something like what I did in my mybox script in its handling of iframe. The concept is simple:

Add a division absolutely positioned over the iframe.
Put your loading image, text, whatever in that division.
Add an onload event to the iframe that makes the loading division's style display property's value 'none'.

Oh, and to be kind to non-javascript enabled browsers, add this 'loading division' with javascript in the first place.

**stefaneh** · 07-18-2007, 06:41 PM

hi John,

will try that just so fare no luck with the other version or better I am not that advanced I guess. I can see the loading image but is just not move from there and loads the iframe or better I guess its load but will not display just incase the code I am using right now

Code:

 <div id="mainContent"  align="center" >
   
    <table width="100&#37;"><!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContentpre.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
			'width', '300',
			'height', '50',
			'src', 'DSCRIPTS Preloader 2',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'DSCRIPTS Preloader 2',
			'bgcolor', '#010101',
			'name', 'DSCRIPTS Preloader 2',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'DSCRIPTS Preloader 2',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
  id="simple_preloader" width="300" height="50">
  <param name="movie" value="simple_preloader.swf">
  <param name="quality" value="high">
  <param name="bgcolor" value="#000000">

  <embed name="simple_preloader" src="simple_preloader.swf" quality="high" bgcolor="#000000"
    width="300" height="50"
    type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
  </embed>
</object>

</noscript>
      <tr>
        <td><div align="center">
          <iframe id="myframe" src="http://iframes

As well the JS

Code:

 <div id="mainContent"  align="center" >
   
    <table width="100%"><!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContentpre.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
			'width', '300',
			'height', '50',
			'src', 'DSCRIPTS Preloader 2',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'DSCRIPTS Preloader 2',
			'bgcolor', '#010101',
			'name', 'DSCRIPTS Preloader 2',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'DSCRIPTS Preloader 2',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
  id="simple_preloader" width="300" height="50">
  <param name="movie" value="simple_preloader.swf">
  <param name="quality" value="high">
  <param name="bgcolor" value="#000000">

  <embed name="simple_preloader" src="simple_preloader.swf" quality="high" bgcolor="#000000"
    width="300" height="50"
    type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
  </embed>
</object>

</noscript>
      <tr>
        <td><div align="center">
          <iframe id="myframe" src="http://iframes

**jscheuer1** · 07-18-2007, 07:09 PM

You've got two identical code blocks there, at least I don't see any differences between them. As a result, I have no idea what your code really looks like or how you have it set up. Can you provide a link to a demo of your page without any attempt at creating a 'loading' image or division? I ask this because, until I see how that is setup, I won't know for sure if the idea I mentioned could work with it. The way you first asked your question made me think that each new video was a new page being loaded into the iframe. Now I am not too sure.

**stefaneh** · 07-18-2007, 07:52 PM

Thanks John, forget about the last code I send I stick with your idea in post6 much easier for an amateur like me. However I don't really understand the onload code and I am sure I have them wrong. The page shows no the preloader object the iframe is loading ( I see it on the bottom of my browser) but the content of the iframe will not display nor the preload image will go away. My code so fare:

By the way love you supporting the IRC one of the best NGO's around

Stefan

Code:

<div id="mainContent"  align="center" >
   
    <table width="100&#37;">
      <tr>
        <td><div align="center">
            <div id="preloader"><object
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0"
        id="preloader"
        width="300" height="50"
      >
        <param name="movie" value="preloader.swf">
        <param name="bgcolor" value="#000000">
        <param name="quality" value="high">
        <param name="allowscriptaccess" value="samedomain">
        <embed
          type="application/x-shockwave-flash"
          pluginspage="http://www.macromedia.com/go/getflashplayer"
          name="preloader"
          width="300" height="50"
          src="preloader.swf"
          bgcolor="#000000"
          quality="high"
          swliveconnect="true"
          allowscriptaccess="samedomain"
        >
          <noembed>
          </noembed>
        </embed>
      </object></div>
            
            <iframe onLoad="preloader" id="myframe" src="http://iframes

**jscheuer1** · 07-18-2007, 09:25 PM

Here's a working example of what I was talking about:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Iframe Loading Notice - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#holder, #holder iframe {
position:relative;
width:500px;
height:400px
}
#loading {
height:50px;
width:125px;
padding:1ex;
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-63px;
display:none;
border:2px groove gray;
background-color:#cccccc;
color:#333333;
}
</style>
<script type="text/javascript">
var loadit=function(){
var f=document.getElementById('myframe'), l=document.getElementById('loading').style;
l.display='block';
if(f.onload==null){
f.onload=function(){l.display='none'};
if(window.attachEvent)
f.attachEvent('onload', f.onload);
}
return true;
}

</script>
</head>
<body>
<div id="holder">
<iframe id="myframe" name="myframe" src="about:blank" scrolling="auto" frameborder="1"></iframe>
<div id="loading">Loading . . .</div>
</div>
<a href="http://www.google.com/" target="myframe" onclick="return loadit();">Google</a><br>
<a href="http://www.dynamicdrive.com/" target="myframe" onclick="return loadit();">Dynamic Drive</a>
</body>
</html>

Thread: Iframe loading script

Thread Tools

Search Thread

Iframe loading script

found a script but not working

Bookmarks

Bookmarks

Posting Permissions