JavaScript - Short Bit Of Js To Dynamically Load Multiple Pages Into Iframe

Hi, I would like to know how I can use JavaScript to find the size of my iFrame and feed it to Shadowbox to launch the appropriate sized shadowbox on different browsers and resolutions. For me, the parent page is called 'demo.html' and the iFrame is 'gallery/archive_iframe.html'.

Currently, the shadowbox is launched with a fixed height and width (which you will see in the HTML code below). The problem is that 'gallery/archive_iframe.html' displays differently on every browser and every resolution, causing unwanted horizontal and vertical scroll bars. An example can be seen he
http://www.mikegermond.com/demo.html

Here is the code that I use in 'demo.html' to launch the iFrame:

Head
Code:

<script type="text/javascript" src="/shadowbox/libraries/mediaplayer/jquery.js"></script>      
      <script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
      
      <script type="text/javascript" src='/shadowbox/libraries/mediaplayer/swfobject.js'></script>
<script type="text/javascript">
function moveCloseLink(){ 
    var cb=document.getElementById('sb-nav-close'); 
    var tb=document.getElementById('sb-title'); 
    if(tb) tb.appendChild(cb); 
} 
Shadowbox.init({
	onOpen: moveCloseLink,
flvPlayer: '/shadowbox/player.swf',
language: 'en',
players: ["flv","iframe"],
flashParams: {allowfullscreen:'true'},
flashVars: {
skin: '/shadowbox/modieus.swf',
image: '/upload/demo-poster.jpg',
autostart: true
}
});
</script>

Body
Code:

<A HREF="/gallery/archive_iframe.html" rel="shadowbox;width=750;height=486" class="imgLink" title="Video Archive"><img src="gallery/videoarchive_thm.jpg" alt="Launch Video Archive (popup window)" width="260" height="162" border="0" /></A>

What do I need to do in 'gallery/archive_iframe.html' if anything? My thought is that I need to wrap it in a DIV tag and find the width and height of that. And what do I need to do in 'demo.html'? I'd assume some code is needed to pull the dimensions discovered in my iframe document, and insert those into the link that launches Shadowbox.

Consider me a JavaScript newbie! You're help is greatly appreciated!!

Hello friends,
I want to trigger click event on an iframe's element through the main window, Doing it both ways, with or without jquery, will be usable for me. Basically, what I want to do is, I have developed a website http://www.ipjugaad.com, and on every document download page, I have placed an fb like button, what I want to do is that the like button should be automatically clicked when a user click on download button on my website. Give me some idea about how to do it?

Hi everyone,

I run a streaming site and would like google adsense to appear at the bottom of the page/stream every 3 minutes, stay for 15 seconds and then close automatically. Then after another 3 minutes they'd appear again, stay for 15 seconds and then close again, etc, etc.

I'd imagine having the adsense in an iframe would be easier.

I'd also like to give users the option to close the adsense using a close button at the top of the iframe if they don't want to wait 15 seconds.

Is this possible?

at the day i include to my web page an iframe , in browser like firefox , opera works fine, but in ie6 sometimes cannot load the content of iframe , and a code who load page in iframe

<iframe frameborder="0" scrolling="no" src='index.php' name='mainFrame' onload='in_process = false;
resizeIframe("mainFrame");'
id='mainFrame' width="100%">
</iframe>


the follow show IE6

Hi all

I have an asp page page with a DIV container that is activated when a user clicks a link (using javascript to activate it. It pops up similar to a light box).

The contents of the DIV is an Iframe from another website. The Iframe is hidden when the page loads.

Loading in the Iframe when the page loads is affecting performance of the page.

I'm wondering if there is a way to load the Iframe when the user clicks the link to activate the DIV light box. This way the page doesn't have to load the Iframe straight away... only when the user needs it...

I appreciate any ideas.

Hello all I am new here but this place looked great and like one of the only places where I could find the answer to my question.

I have created a page which pulls search results from various sites using PHP. It displays each result in a row in a table upon running.

I wanted to add a button saying "More information" at which point, a div would appear and load the associated link for that search result within an iframe within the newly appeared div. I've been able to get a div appear and disappear on button click but, I couldn't get it to dynamically load an iframe on click with the associated search results link.

Any suggestions are greatly appreciated. Also let me know if you need more information before assisting. Thanks!

Hi,

I have written a code below:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script type="text/javascript">
            function emailRowContent(isSelected, emailAddress, severity)
            {
                var emailRowObj = document.getElementById('emailRow');
                
                emailRowObj.childNodes[1].childNodes[0].checked = isSelected;
                emailRowObj.childNodes[3].childNodes[0].value   = emailAddress;
                emailRowObj.childNodes[5].childNodes[0].checked = severity;
            }
            
            function LoadUp()
            {
                var emailAddressListObj = document.getElementById('emailAddressList');
                var arrayOfEmails = new Array(5);
                
                for (i = 0; i < 5; i++)
                {
                   arrayOfEmails[i] = new emailRowContent( "checked", "fjkum@unknown.com" + i, i );                                                       
                   //emailAddressListObj.appendChild( arrayOfEmails[i] ); /* Somehow this line breaks */                   
                }
            }
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
    </head>
    <body onload="javascript:LoadUp();">
        <div id="emailRow" class="emailRowClass">
            <div><input type="checkbox" class="checkbox1"></div>
            <div><input type="text" class="textfield"></div>
            <div><input type="checkbox" class="checkbox2"></div>
        </div>
        
        <div id="emailAddressList" class="emailAddressClass"></div>
    </body>
</html>

Basically, what I want to do is to dynamically create 5 instances of "emailRow" onto the web page making use of Javascript DOM. But have no success in getting it to work.

Can anyone shed some light?

Mike

Hi

I am attempting to integrate two dynamic applications. I have successfully created an iFrame in app A that serves the dynamic pages of app B. This enables me to preserve the site theme of app A.

Most of app B's pages successfully display inside the app A iFrame.

The problem is, when application B displays a page (inside app A's iFrame parent) clicking on a link inside that page opens that page in another iFrame (child) and I can't see what could be wrong...

fresh pair of eyes would be good....


Code:

<iframe id="listframe" name=target src="http://www.mysite.com/dynamicpages/" 
width="580" height="850" frameborder="0" scrolling="no" >
</iframe>
  <script type="text/javascript">
window.onload = function () {
var q = (document.location.search);
document.getElementById('listframe').src += q;
}
</script>

Hi all. First post so please be gentle.

My sites has a menu on the home page linking to a dozen other pages. My intention is to open those items into a main iframe also on the home page.

I have put the <base target="iframe" > in the <Head> area and all seems to work in Opera but Internet Explorer and Firefox will both open new windows instead of loading into the iframe.

Having said that. Links from WITHIN the iframe will open correctly in all browsers.

Ideas in newbie-speak very much appreciated
Regards, Phil

Hi,
I have a webpage structured as below and want the contents in the iframe to load prior to the code below it. At the moment the javascript(resizing stuff) in the iframe code delays the iframe from loading in full before the "streaming music player" code. This iframe javascript is on the page as opposed to an external file. I would have thought the iframe would have to load in full before the code below it would be executed. How do I make the iframe load in sequence or delay/hide the code below it until iframe is fully loaded?
Thanks

####header####
flash

####header menu####
flash

####iframe####
lots of javascript and content from page on mywebsite (not external url)

###streaming music player#####
embedded flash player linked to external site

####footer menu####
flash

I am a javascript newbie. I have a radio website that runs a live stream 24/7. The live stream is loaded in to an iframe named "stream". I only ever have 2 files that show in that iframe. 1 for when the user has the stream on and another for when they turn it off. stream_on.php and stream_off.php

I also have podcasts on the site and my goal is when the user clicks the .swf object to play the podcast, the live stream in the iframe changes to stream_off.php so that the 2 audios don't overlap each other.

Here's the code I have so far for the .swf object.

PHP Code:
<object type='application/x-shockwave-flash' data='player_mp3_maxi.swf' width='50' height='20' class='blur' onclick="window.open('stream_off.php','stream')\">
<param name='movie' value='player_mp3_maxi.swf' />
<param name='bgcolor' value='#666666'>";
if ($row['location'] == "")
 {
  echo "<param name='FlashVars' value='mp3=". $site ."podcasts/". $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
  }
else
  {
echo "<param name='FlashVars' value='mp3=http://". $row['location'] . $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
   }
</object> 


And the code for the iframe. It's default state is stream_on.php since on load I want the stream to start right away. I only need it to change upon clicking of any .swf object on the page.

PHP Code:
<iframe src='stream_on.php' id='stream' marginheight='0' width='195' height='110' frameborder='0' scrolling='no'></iframe> 


As you can see, I put the onclick in the object tag.

Is this correct ? Is there a piece of javascript code I am missing ?

Please Help.

Hi,

I am looking for some code that will do the following

Form to post any URL to an iFrame and load said URL.

I been told Javascript can do this, but I am also after the form bit as well if possible.

From an iframe, I want to load and play a playlist in a wimpy mp3 player in the parent page.

I can do it as if it is a popup window but it requires that from one iframe, I reload the player in the other iframe. Here are the functions given by wimpy:

Code:

<script language="JavaScript" type="text/JavaScript">
<!--


var wimpyWindow;
var winOpen= 0;
function wimpyPopPlayer(wimpyPopPage,theWidth,theHeight) {
	wimpyWindow = window.open(wimpyPopPage,'wimpyMP3player','width='+theWidth+',height='+theHeight);
	winOpen=1;
}
function wimpyPopPlayerWithFile(wimpyPopPage,initialFile,theWidth,theHeight) {
	wimpyWindow = window.open(wimpyPopPage+'?theFile='+initialFile,'wimpyMP3player','width='+theWidth+',height='+theHeight);
	winOpen=1;
}
function wimpyIsOpen(){
	if (winOpen==1){
		if (wimpyWindow.closed){
			return false;
		} else {
			return true;
		}
	} else {
		return false;
	}
}
function wimpyPopAndPlay(startOnLoad, theFile, theArtist, theTitle, graphicURL, hotlinkURL){
	if(wimpyIsOpen()){
		wimpyWindow.wimpy_addTrack(startOnLoad, theFile, theArtist, theTitle, graphicURL, hotlinkURL);
	} else {
		wimpyPopPlayerWithFile('home2.shtml',theFile,'325','350');
	}
}
//-->

</script>

Is there a way to do it that targets the player in the iframe without treating it like a popup window?

Any help greatly appreciated!

how do i make something like this? so that instead of viewing a long list it will be divided into pages..?

Ok, I am aware this will sound like a plug for my script, but please bare with me. I created a bookmarklet script to help me audit extremely large style sheets.

Basically while on a site that you would like to audit, you click the bookmarklet and the document's body contents gets remove and replaced with an iframe that points to the current sites home page. From here you can choose what style sheet (the script finds) to begin reporting over. The more pages you browse (through the iframe) the more accurate the report gets.

My problem however, is if the person is on the site's home page when first running the script, the iframe never loads up. I think it has to do with the fact that you are on the home page, and then the iframe tries to point to the home page as well and fails for some reason.

Is there any solution that comes to mind for anyone out there?

You can test it by bookmarking this bookmarklet and running it on any site's home page where style sheets can be found:

Get The Bookmarklet on this page

Again, it works great if you don't start the script from a sites home page.