[RESOLVED] To get the value of iframe and its elements

mandarchalke29 · Dec 8, 2007

I have created an IFRAME in my page and i wanted to get the value of the elements placed on it. i have coded it like this.

<body onload="javascript:chat_init();" bgcolor="#EBF3FB">
<iframe id="chatContents" name="chatContents" src="contents.html"></iframe><br>
<script type="text/javascript">
var cWindow;
var cDocument;
var id11;

  function chat_init()
  {
    var chatContents = document.getElementById("chatContents");
    if(chatContents.contentWindow)
    cWindow = chatContents.contentWindow;
    if(cWindow.document)
    cDocument=cWindow.document;
  }

  function insertMessages(content)
  {
    //place the new messages in a div
    var newDiv = cDocument.createElement("DIV");
    newDiv.innerHTML = content;

    //append the messages to the contents
    cDocument.getElementById("contents").appendChild(newDiv);

    //scroll the chatContents area to the bottom
    cWindow.scrollTo(0,cDocument.getElementById    ("contents").offsetHeight);
  }

But everytime when i load the window it says cDocument is null as a javascript error and if i refresh it, it works fine. Why does so. Will anyone please help me?

Mandar

paulnaj · Dec 8, 2007

Hi Mandar,

Just played around with your code to make it like how I might do the same thing ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>PHP 5 - forum test page</title>
<script type="text/javascript">
var cWindow;
var cDocument;
var id11;

window.onload = function(){
	var chatContents = document.getElementById("chatContents");
	if(chatContents.contentWindow){
		cWindow = chatContents.contentWindow;
		cDocument = cWindow.document;
	}

// Add button onclick
document.getElementById('gobutton').onclick = function(){
	cDocument.getElementById("contents").innerHTML = 'Hello world';
}

}
function insertMessages(sContent){
	//place the new messages in a div
	var newDiv = cDocument.createElement("DIV");
	newDiv.innerHTML = sContent;

//append the messages to the contents
cDocument.getElementById("contents").appendChild(newDiv);

//scroll the chatContents area to the bottom
cWindow.scrollTo(0,cDocument.getElementById ("contents").offsetHeight);
}
</script>

<style>
body { 
	background-color: #EBF3FB; 
	color: #000000;
}
</style>

</head>

<body>
<input type="button" id="gobutton" value="Go">
<br>
<iframe id="chatContents" name="chatContents" src="contents.html"></iframe>
</body>
</html>

with contents.html like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>contents.html</title>
</head>
<body>
	<div id="contents">contents.html</div>
</body>
</html>

and I don't get any errors.

See if it helps.

mandarchalke29 · Dec 10, 2007

Dear sir,

   Thank you. I have tried with it. But it's still not working. Can you please help me.

Mandar

paulnaj · Dec 10, 2007

Hi there,

I have tested this code and it 'works', but it still might be doing what you want.

Or it doesn't 'work' on your server/machine, which would be odd.

You'll have to be more specific.

P.

mandarchalke29 · Dec 10, 2007

To be more specific let me tell you that its a strange problem. the script error doesnt comes in my window but it is coming in other internet explorers.

  I have made the same changes which you have told me. I am creating a chat application and the window in which i have put this code appears when i click any user in another window. 

  The concept is like this. A main window is having all the users who are online. Whenever i click the users who are online in that window a new window appears. And if a sender sends a message in that window another window appears at the receiver end at that time this null error comes. i have now coded it like this.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Regalmail-Beta Chat</title>
<style type="text/css">
#chatContents{height:300px; width:510px;}
</style>
<script type="text/javascript">
function resetForm()
{
document.getElementById("message").value = "";
document.getElementById("message").focus();
}
function focusForm()
{
document.getElementById("message").focus();
}
function focustext()
{
var name=window.name;
<?
$sql2 = "SELECT chat_tmp_usr_id1 FROM chat_temp_table";
$res2 = mysql_query($sql2);
if(mysql_num_rows($res2))
{
while($row2 = mysql_fetch_array($res2))
{?>
var id25='<?echo "".$row2['chat_tmp_usr_id1']?>';
if(name==id25)
{
document.getElementById("message1").value=name;
}
<?}}?>
document.getElementById("statusmessage").style.display="inline";
}
function losttext()
{
document.getElementById("statusmessage").style.display="none";
}
var cWindow;
var cDocument;
var id11;
window.onload=function()
{
var chatContents = document.getElementById("chatContents");
if(chatContents.contentWindow)
{
cWindow = chatContents.contentWindow;
cDocument=cWindow.document;
}
}
function insertMessages(content)
{
//place the new messages in a div
var newDiv = cDocument.createElement("DIV");
newDiv.innerHTML = content;

    //append the messages to the contents
    cDocument.getElementById("contents").appendChild(newDiv);

    //scroll the chatContents area to the bottom
    cWindow.scrollTo(0,cDocument.getElementById("contents").offsetHeight);
  }

if(parent.insertMessages && document.getElementById("contents"))
parent.insertMessages(document.getElementById("contents").innerHTML);

</script>
<style>
body
{
background-color: #EBF3FB;
color: #000000;
}
</style>
<?
$sql1 = "SELECT chat_user_id,chat_user_id1,chat_user_name,Message FROM chat_table WHERE chat_user_id=".$SESSION['Chat3_UserID']." and chat_flag='".$flag10."'";
$res1 = mysql_query($sql1);
if(mysql_num_rows($res1))
{
echo '<div id="contents">';
while($row1 = mysql_fetch_array($res1))
{
if($row1['chat_user_id']==$SESSION['Chat3_UserID'])
echo '<div class="ylayout-active-content" style="font-size:14px;font-face:arial;"><strong>'.htmlspecialchars($row1['chat_user_name']).':</strong>'.htmlspecialchars($row1['Message']).'</div>';
}
echo '</div>';
}
?>
</head>
<body>
<iframe id="chatContents" name="chatContents" src="contents.html"></iframe><br>
<div style="display:none;color:red;height:1px;" id="statusmessage"><?echo "".$_SESSION['Chat1_UserName']?>  is typing</div><br><br>
<form target="post" method="post" action="post.php">
<input type="text" onkeydown="javascript:focustext();" onkeyup="javascript:losttext();" name="message" id="message" style="width: 460px;height: 40px;" />
<input type=hidden name="message1" id="message1" value="" />
<input type="submit" value="Send" class="submit" style="width: 55px;height: 47px;" />
</form>
<iframe id="post" name="post" src="post.php" style="width: 0px; height: 0px; border: 0px;"></iframe>
<iframe id="thread" name="thread" src="thread.php" style="width: 0px; height: 0px; border: 0px;"></iframe>
</body>
</html>

Mandar

suntra · Dec 10, 2007

I did not test anything, but a few years ago I did something with iframes and I had to use document.getElementById() for some browsers, and, I THINK, document.frames for others...

suntra · Dec 10, 2007

Ok, this works with Firefox 2.0.0.11, IE 7, 6 and 5.5, Opera 9.24. Wanted to test with Safari, but the current version simply crashes when I start it !

function returnFrame(strID) {
    var oIframe = document.getElementById(strID);
    var oDoc = oIframe.contentWindow || oIframe.contentDocument;
    if (oDoc.document) {
        oDoc = oDoc.document;
    }
    return oDoc;
}
function getIFrameHTML(strID) {
    var objChilds   = returnFrame(strID).childNodes;
    var strHTML     = "";
    for(i = 0; i < objChilds.length; i++) {
        if((objChilds[i].nodeType == 1) && (objChilds[i].innerHTML !="")) {
            strHTML     = objChilds[i].innerHTML;
            break;
        }
    }
    return strHTML;
}

Simply call getIFrameHTML('id of the iframe')

I suggest you set the id AND name attribute with the same value, just in case...

A note about IE 5.5 : if you use XHTML with <?xml ... ?> as the first line, IE 5.5 will return that line instead of the "normal" innerHTML...

mandarchalke29 · Dec 11, 2007

Thank you all. The problem is solved.

Thank you once again.

Mandar

boguinet · Jul 6, 2008

Does anybody know the solution to this problem?

Guys leaves without saying the fix heh how does that help the community?

Has anyone else figured out the problem?

[RESOLVED] To get the value of iframe and its elements

Mmandarchalke29

Ppaulnaj

Mmandarchalke29

Ppaulnaj

Mmandarchalke29

Ssuntra

Ssuntra

Mmandarchalke29

Bboguinet