JavaScript - Issue On Loading .html Into An Iframe (which Is Inside A Div Tag)

Hello!

I have a script that loads a popup window on any page of a website, in order to temporarily cover the page's content. This popup window is supposed to load on top of page's content, acting as a sort of page blocker. So the visitor can't see what's on the page until he clicks the popup.

The problem i'm having right now is when i put this script on a page that has iframe content. The iframe loads on top of this popup and not underneath as it's supposed to be.

Do you guys have any advise on what should i do to make this work properly when using iframes on a page?

Here is the script:

Code:

var blocker_originalHtmlOverflow;
var blocker_originalBodyOverflow;

function blocker_addLoadEvent(func)
{    
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    } 
    else 
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

blocker_addLoadEvent(blocker_init);

function blocker_init()
{    
    if(blocker_getCookie('content_unlocked')=='1')
        return;

    blocker_originalHtmlOverflow = document.getElementsByTagName('body')[0].style.overflow;
    blocker_originalBodyOverflow = document.getElementsByTagName('html')[0].style.overflow;

    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    document.getElementsByTagName('html')[0].style.overflow = 'hidden';

    function pageScroll() {

        window.scroll(0,0); // scroll to 0

        if(blocker_getCookie('content_unlocked')!='1'){

         scrolldelay = setTimeout('pageScroll()',100); // scrolls every 1 second

        }

    }

    pageScroll();


    var haze = document.createElement('div');
    haze.id = 'blocker_haze';
    haze.style.filter = 'alpha(opacity=50)';
    haze.style.opacity = .5;
    haze.style.height = '2000';
    haze.style.width = '2000%';
    haze.style.backgroundColor = '#000';
    haze.style.position = 'absolute';
    haze.style.top = '0px';    
    haze.style.left = '0px';
    haze.style.zIndex = 1000000;

    var centerPane = document.createElement('centerPane');
    centerPane.id = 'blocker_centerPane';
    centerPane.style.width = '500px';
    centerPane.style.height = '361px';
    centerPane.style.border = '5px solid #CCC';
    centerPane.style.position = 'absolute';
    centerPane.style.left = '50%';
    centerPane.style.marginLeft = '-250px';
    centerPane.style.top= '100px';
    centerPane.style.backgroundColor = '#FFF';
    centerPane.style.zIndex = 1000001;
    centerPane.style.backgroundImage = 'url(http://www.fasgasfga.com/sfasdfasdf.jpg)';
    centerPane.style.backgroundRepeat = 'no-repeat';
    centerPane.style.backgroundPosition = '20px 10px';
    centerPane.style.padding = '20px';

    var h1 = document.createElement('h1');
    h1.style.color = '#000';
    h1.style.textAlign = 'center';
    h1.style.fontSize = '36px';
    h1.style.margin = '0 0 10px 0';
    h1.style.padding = '8px 0 0 15px';
    h1.style.fontFamily = 'arial';
    h1.style.lineHeight = '36px';
    h1.innerHTML = blocker_headline;
    centerPane.appendChild(h1);

    var p1 = document.createElement('p');
    p1.innerHTML = blocker_instructionalText;
    p1.style.textAlign = 'center';
    p1.style.padding = '20px 0 20px 0';
    p1.style.margin = '0';
    p1.style.fontSize = '18px';
    p1.style.lineHeight = '18px';
    p1.style.color = '#000';
    p1.style.fontFamily = 'arial';
    centerPane.appendChild(p1);

    var ul = document.createElement('ul');
    ul.style.textAlign = 'center';
    ul.style.margin = '0 0 10px 0';
    ul.style.padding = '0';
    ul.style.listStyleType = 'none';
    for(var i = 0;i<blocker_surveryLinks.length;i++){
        var li = document.createElement('li');        
        var a = document.createElement('a');
        a.style.display = 'block';
        a.style.fontSize = '17px';
        a.style.lineHeight = '380px';
        a.style.color = 'Black';
        a.style.fontFamily = 'arial';
        a.style.textDecoration = 'underline';
        a.target = '_blank';        
        a.href = blocker_surveryLinks[i].url;
        a.innerHTML = blocker_surveryLinks[i].text;
        a.onclick = function(){
            window.setTimeout(unblockContent, 55000);
        }
        li.appendChild(a)    
        ul.appendChild(li);
    }

    centerPane.appendChild(ul);

    var p2 = document.createElement('p');
    p2.style.textAlign = 'center';
    p2.innerHTML = blocker_footerText;
    p2.style.padding = '20px 0 0 0';
    p2.style.margin = '0';
    p2.style.color = '#F50E0E';
    p2.style.fontFamily = 'arial';
    p2.style.fontSize = '15px';
    p2.style.lineHeight = '15px';
    centerPane.appendChild(p2);

    document.getElementsByTagName('body')[0].appendChild(haze);
    document.getElementsByTagName('body')[0].appendChild(centerPane);
}

function unblockContent(){
    document.getElementsByTagName('body')[0].style.overflow = blocker_originalBodyOverflow;
    document.getElementsByTagName('html')[0].style.overflow = blocker_originalHtmlOverflow;

    document.getElementById('blocker_haze').style.display = 'none';
    document.getElementById('blocker_centerPane').style.display = 'none';
    //blocker_setCookie("content_unlocked", 1, 365, '/', '');
	Set_Cookie( 'content_unlocked', 1 , 365, '/', '', '' );
}
function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );

/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );

document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}

function blocker_setCookie(c_name,value,expiredays){
    var exdate=new Date();exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function blocker_getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1){ 
            c_start=c_start + c_name.length+1; 
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            return unescape(document.cookie.substring(c_start,c_end));
        } 
    }
    return "";
}

Hi Guys,

I have an situation. An DIV has two sections, one to prompt user info and other displays ads. While the ads section is in an iframe(inside DIV) whose src is set dynamically, i.e. when user tries to close the browser, then my code brings up the DIV and sets the src of that iframe also an browsers default prompt stays on top of the page asking for 'Ok' and 'Cancel' button to leave/stay on the page respectively.

My problem is that the iframe is not loaded unless user clicks on the 'Cancel' button. This happens in IE,Chrome and Safari but works fine in Firefox. I know this is an browser's behavior but still expect an cross browser solution.

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.

I use the following code to create a hidden iFrame on a page, dynamically

Code:

var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { i.parentNode.removeChild(i);};
i.src = 'http://www.mysite.com';
document.body.appendChild(i);
i.id='frame1';

Now,

document.getElementById('frame1').contentDocument.getElementById('text01').value

Should have given me the value in 'text01', but it doesn't. It doesn't work even inside the iFrame's onload event.
('text01' is a textbox which is on the page inside the iFrame - its name and id are both 'text01')

Is there any other method to get the text in a textbox within an iFrame?

Please help me to correct the code. Thanks in advance.

Hi I have this page below which I run locally that is created dynamically:


I need a piece of javascript to focus on the captcha as shown in the image inside the green box.
At this minute I have this which doesn't work all that great for some reason but it gets it to the general area...
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();

	}

}

As I said this does the job to some extent however it does not leave the focus in a perfect position so that the captcha is readable and the text box visible to type in, as illustrated in the red box in the above image.

Help with this would be great.

Many thanks,
David.

I'm admittedly green in this area [among others!], but will there be any issues with any browsers loading the url below with the scripts at the bottom of the page like I have them?

http://alton.k12.mo.us/index.html

FF loads them fine for me, as does IE *until* I hit the compatibility mode button, then it seems to sort of "hang"...but with IE, I'm not really ever sure of what it's doing is correct or not?

I have a form inside an iFrame which I want to submit with javascript as the iFrame loads.

For example:

Code:

<iframe src="......." name="myiframe" id="myiframe">
<form method="post" id="myform" name="myform" action="http://
www.yahoo.com" rel="nofollow" target="_self">
</form>
</iframe>

No matter how I try to submit the form I cannot get it. I have tried:

document.getElementsByName("myform")
document.myiframe.myform


all other combinations I try gives the same, i cannot access the form.

(The page inside the iFrame is from the same domain as the parent page, I am not trying to do any cross domain scripting)

Can you please assist me getting this working ?

Thanks!

Alright so I've been teaching myself php/javascript/html/joomla for the past couple weeks, learning as i go along. So bear with me if i seem like a total moron =p.

I'm trying to run a script from a js file to add javascript to the website inside the iframe. I also would like the script to only be activated onclick(this is all in an article).

To clarify my website has an iframe and this iframe contains a webpage from http://website987.com/. I want to run thescript.js on the website inside that iframe, to add javascript to that website, however i also only want to run this js file on the click of a link/button. I hope i'm being clear if I'm not please tell me and ill try to reiterate.

I've been trying to get this to work for a while now and I feel like this is really simple and I'm asking a stupid question. However this is what I've got so far, currently this just redirects the iframe to the URL with my code on it(instead of actually running it).How could i edit this/what coding could I use to make it so thescript.js actually runs instead of it being just redirected?
Reply With Quote

Code:

<?php
$filename = 'thescript.js';
$path = '/media/system/js/'; // add the path parameter if the path is different than : 'media/system/js/'
JHTML::script($filename, $path, true); // MooTools will load if it is not already loaded
?>

Code:

<HTML>
<HEAD>

<script language="javascript">
function loadOne()
{
parent.FRAME1.location.javascript: function('/media/system/js/thescript.js')
}
</script>
</HEAD>
<BODY>

<iframe name="FRAME1" src="http://website987.com/" width="740" height="500" frameborder="0" scrolling="yes"></iframe>

<a href="javascript:loadOne()">Click Here/a>
</BODY>
</HTML>

Am i even on the right track? I've been testing out a billion different codes and I think it would be ridiculous to post them all so I was hoping someone could help me fix this code or at least point me in the right direction. I'm usually able to figure everything out on my own but I'm failing atm and I just need help on this one thing, I would be ever so thankful for any assistance provided, !

(BTW I'm also currently using the Joomla CMS and a joomla plugin called CodeMirror that runs your code directly from the article, not sure if this is relevent or not)

Hi,

I'm stumped at the moment trying to make something a little like seen on
Google Maps where you can search the location in text box and the map corresponding to the location will be dispalyed.
Can any one send me the Javascript for the following in which my image is paced in an iframe and the upon entering the loaction in a
textbox it image must move to that position witin the iframe.

Any help will be appreciated.

Regards,
Sreejith

Hi, I was working on my web page and noticed that depending on the width of the screen, the Iframe I created would not display correctly. Because of that I needed to come up with a piece of code that would detect the screens horizontal resolution and pick the right Iframe to be loaded. Below are the scenarios that specify which one should be loaded. I am very bad with javascript so could someone help me come up with a piece of code that would load the right frame? Thanks. The web address where the code will go is www.jumbledfun.com/nasa.html.



If the horizontal resolution of the screen is less then 1600 I would like this Iframe to be loaded: (It Would Go Under The If Part)

Code:

<iframe src="http://www.jumbledfun.com/nasaframes/nasalivelr.html"  width= "55%" height= "580%" scrolling="no" frameborder="0"/> </iframe>

If the horizontal resolution of the screen is 1600 or more I would like this Iframe to be loaded: (It Would Go Under The Else Part)

Code:

<iframe src="http://www.jumbledfun.com/nasaframes/nasalive.html"  width= "100%" height= "300%" scrolling="no" frameborder="0"/> </iframe>

This is the format that I would want it in:

Code:

<script type="text/javascript">

if (condition)
  {
  code to be executed if condition is true
  }
else
  {
  code to be executed if condition is not true
  }

</script>

Hi guys,

right now I'm trying to write a comet application, that communicates with a server by iframe streaming. The problem is, that in my applications the browser does the "loading thing" (loading bar, loading cursor).
I have seen many applications, where iframe streaming is used, without any loading signs in the browser. For example:

http://www.stream-hub.com/demo/StockDemo/index.html
http://orbited.org/wiki/LiveHelp
http://lib1.freeliberator.com/exampl...e-example.html

(some examples use XHR streaming)

Could somebody tell me how to do it without the loading stuff?

Thanks and best regards,
Markus

Something is up with my coding, when I try to load the page.. it will only load in notepad. Help!


<html>
<head>
<title>Other ways to help</title>

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}


function validateForm(form) {
var fName = form.txtFname.value;


var dataIsValid = true;

var errMsg = "The following inputs are missing or invalid:\n\n";


if(fName == '') {
errMsg = errMsg + "First Name\n";
dataIsValid = false;
}


if(lName == '') {
errMsg = errMsg + "Last Name\n";
dataIsValid = false;
}




if(dataIsValid) {
return true;
} else {
alert(errMsg);
return false;
}
}

//-->
</SCRIPT>

</head>

<body>
<a name="other">
<body background="otherbackground.jpg">
<center><table border="2" cellspacing="2" width="900" height="190" bordercolor="#000000">
<tr>
<td width="60%" td bgcolor="white">
<b>To make a donation, fill and submit the following form. You can also make a cash donation directly by filling out your credit card information.<br/>
Also, be sure to check yes if you would like to subscribe to our online monthly newsletter.</b><br/>
<form name="Donations" method="post" action="#" onsubmit="validateForm(this);">
First Name<input type="text" name="txtFname" size="25" tabindex="1">
M.I.<input type="text" name="M.I." size="1">
Last Name<input type="text" name="Last Name" size="25"><br/>
Street Address<input type="text" name="Street Address" size="25">
Street Address 2<input type="text" name="Street Address 2" size="25"><br/>
City<input type="text" name="City" id="myCity" size="20">
State<input type="text" name="State" size="2">
Zip<input type="text" name="Zip Code" size="10"maxlength="9"><br/>
Email<input type="text" name="Email" size="25"><br/>
Credit Card Number<input type="text" name="Credit Card Number" size="10"maxlength="8">
Expiration Date<input type="text" name="Expiration Date" size="5">
Security Number<input type="text" name="Security Number" size="3"maxlength="3">
<textarea cols="50" rows="4" name="Comments">Comments or Questions:</textarea><br/>
Subscribe to newsletter? <input type="radio" name="choices" value="Yes">Yes<input type="radio" name="choices" value="No">No<br/><br/>
<input type="submit" value="Submit">
<input type="reset">
</form><br/>
</table><br/>

<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Choose a Destination...
<OPTION VALUE="home.html">Home Page
<OPTION VALUE="dogs.html">Learn About Dogs
<OPTION VALUE="cats.html">Learn About Cats
<OPTION VALUE="exotics.html">Learn About Exotics
<OPTION VALUE="other.html">Other Ways To Help
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
<br/><br?>

</body>

</html>

Hi,

I'm currently working on my portfolio website and would like to have information about my movie clips be retrieved from an XML document when a thumbnail is clicked. I am building my website in HTML and would like to retrieve the Xml using JavaScript. Any help would be appreciated.

My XML is valid and structured as such:


<?xml version="1.0" encoding="UTF-8"?>
<work>

<motion>

<reel>
<title id="Demo Reel 2009" project="Self Promotion" client="Self">
<![CDATA[This demo reel is primaraly a collection ......]]>
</title>
</reel>
.
.
.
.


These are my initial variable definitions and readXML function in javascript:


<script language="javascript">

var xmldom, workNode, motionNode, printNode, fineartNode, displayNode, titleNode;


function readXMLDocument()
{

xmldom=createDocument();
xmldom.async=false;


if (xmldom.parseError != 0) {
alert("An error occurred: \nError Code " + xmldom.parseError.errorCode + "\n" + "Line: " + xmldom.parseError.line + "\n" + "Line Pos: " + xmldom.parseError.linepos + "\n" + "Reason: " + xmldom.parseError.reason);
} else {
alert("Document: " + xmldom.documentElement);
alert("Root: " + xmldom.documentElement.tagName);
alert("Child: " + xmldom.documentElement.firstChild.tagName);
alert("Xml DOM: " + xmldom.xml);
}


xmldom.load("workinfo.xml");


workNode=xmldom.documentElement;

motionNode=workNode.firstChild;

printNode=motionNode.nextSibling;

fineartNode=printNode.nextSibling;
}
.
.
.
.



A call to function revealText is called "onClick" of a thumbnail as such:


<a href="videopages/reel.html" class="vid" target="video" onClick="revealText(0)">


This is function revealText:


function revealText(x)
{
var title, project, client, info;

readXMLDocument();

displayNode=motionNode.childNode[x];


titleNode=displayNode.firstChild;


title=titleNode.getAttribute("id");
project=titleNode.getAttribute("project");
client=titleNode.getAttribute("client");
info=titleNode.getNodeValue();

titleSpan.innerHTML=title;
projectSpan.innerHTML=project;
clientSpan.innerHTML=client;
infoSpan.innerHTML=info;
}
</script>

and these are the spans they are written to:


<span id="titleSpan" class="vidinfo">

<span id="projectSpan" class="vidinfo">

<span id="clientSpan" class="vidinfo">

<p id="infoSpan" class="content">


If you have read this far, I REALLLLY appreciate it. And any ideas as to what is wrong would help alot.

Anyone familiar enough with pikachoose to help me out here? Using a pikachoose slideshow inside an iframe and for some reason adding a url target of _top or _parent is not working. It just opens up the link in the iframe window no matter what i do. Anyone with an idea of how to fix this?
I'm working on it in the staging area of my site- http://staging.susanb.com/
You can see when you click on one of the images it doesnt fill the entire window

This just creeped up on me at the end of a project so im hoping its not a deal breaker
thanks in advance!!

I am currently working on a simple site and I was looking into methods to take advantage of html partial rendering to make site maintenance easier without using a server side language. The code for the two pages is as follows:

Main html page:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	
	<head>
		<link href="../css/main.css" rel="stylesheet" type="text/css"/>
		<link href="../css/default.css" rel="stylesheet" type="text/css"/>
		<title>Default</title>
	</head>

	<body>	
		<div class="navigation" id="nav_div">
			<iframe name="nav_frame" onload="loadNav()"></iframe>
		</div>
		
		<script type="text/javascript"  language="javascript">
		<!--
			function loadNav()
			{
			       nav_frame.location="../static_partials/navigation.htm";
			}
		//-->
		</script>
	</body>
</html>

And the code of navigation.htm is:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head> 
		<script type="text/javascript"  language="javascript">
		<!-- 
			function iframeLoad() 
			{ 
				parent.document.getElementById("nav_div").innerHTML =  document.getElementById("navigation_divs").innerHTML;
			}
		//-->
		</script>
		<title>Navigation Partial</title>
	</head>
	<body onload="iframeLoad()">
		<div id="navigation_divs">
		</div>
	</body>
</html>

The works fine in IE, but in Firefox 3.5.7 the iframeLoad generates an exception.
The exception states the following:
Code:

Permission denied for <file://> to get property Window.document from <file://>.

Firefox doesn't seem to like my usage of the parent object in that way, but I am unsure of another way to do it without using a server side language.