Access attribute values in iFrame

JavaScript
1

I need to copy input (checkbox) values from a form inside my iframe to the form in my parent frame using javascript and I’m not sure how to modify my current code to accomplish this! I’m using cold fusion to display the values from a database inside the iframe. Once all the values are loaded into the iframe, I need to be able to select as many as necessary and then submit the form from the parent frame which then runs a report that utilizes those values, but I can’t do that because my code is written so that the values load in the iframe form and the action to run the report that requires those values is executed from the form in my parent frame. Here are the code snipits:

Main “Parent” Frame Code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<cfparam name="WordFlag" default="0">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script language="javascript" type="text/javascript">
checked=false;
function checkedAll (frm2) {
	var aa= window.document.ActivityFrame.document.getElementById('frm2');
	 if (checked == false)
          {
           checked = true
          }
        else
          {
          checked = true
          }
	for (var i =0; i < aa.elements.length; i++) 
	{
	 aa.elements[i].checked = checked;
	}
}

checked=true;
function uncheckedAll (frm2) {
	var aa= window.document.ActivityFrame.document.getElementById('frm2');
	 if (checked == true)
          {
           checked = false
          }
        else
          {
          checked = false
          }
	for (var i =0; i < aa.elements.length; i++) 
	{
	 aa.elements[i].checked = checked;
	}
}

function checkVal (frm2) {
	var chks = window.document.ActivityFrame.document.getElementsByName('ActivityList');
	var hasChecked = false;
	for (var i = 0; i < chks.length; i++) {
	  if (chks[i].checked) {
	   hasChecked = true;
	   break;
	  }
	}
	if (hasChecked == false) {
	  alert("Please select at least one activity!");
	  return false;
	}
	return true;
}
</script>

</head>

<body>
	<table>
    	<tr>
            <td><CFOUTPUT><H1>#lblReportName#</H1></CFOUTPUT></td>
        </tr>
        <tr>
            <td><CFOUTPUT><H1>#cookie.strProjectName#</H1></CFOUTPUT></td>
        </tr>
    </table>
    <form id="frm1" name="frmPMSelection" method="post" action="../report_manager/index.cfm?fuseaction=ProjectMediaAudit&lblReportName=#URLEncodedFormat(lblReportName)#&WordFlag=#WordFlag#" target="_self">
    <table>
    	<tr>
            <td align="left"><CFOUTPUT>#lblSelectPMAActivities#</CFOUTPUT><br /><br /></td>
        </tr>
    	<tr>
        	<td>
    			<table>
                	<tr>
                        <td align="right">
                            <cfoutput>
                            <a href="javascript:checkedAll()"><img src="../graphics_interface/buttons/select_all_#cookie.numLanguagePref#.gif" alt="#Request.lblSelectAll#" title="#Request.lblSelectAll#" align="absmiddle" border="0" /></a>&nbsp;
                            <a href="javascript:uncheckedAll()"><img src="../graphics_interface/buttons/select_none_#cookie.numLanguagePref#.gif" alt="#Request.lblSelectNone#" title="#Request.lblSelectNone#" align="absmiddle" border="0" /></a>&nbsp;
                            </cfoutput>
                            <CFSCRIPT>Request.cshelp.showHelp(str_contentType="screen",str_contentID="",str_helpText=Request.str_lang_cshelp);</CFSCRIPT>
                        </td>
                    </tr>
                    <tr>
                        <td class="TABLEDATA">
                        	<cfoutput>
                            	<iframe name="ActivityFrame" scrolling="auto" width="480" height="360" src="./index.cfm?fuseaction=ProjectMediaAuditFrame"></iframe>
                            </cfoutput>
                        </td>
                    </tr>
                    <tr>
                    	<td>
                        	<cfoutput>
                            <input type="image" src="../graphics_interface/buttons/submit_#cookie.numLanguagePref#.gif" alt="#Request.lblSubmit#" title="#Request.lblSubmit#" align="absmiddle" border="0" onclick="return checkVal()" />&nbsp;
                            <a href="javascript:void(0);"><img src="../graphics_interface/buttons/cancel_#cookie.numLanguagePref#.gif" alt="#Request.lblCancel#" title="#Request.lblCancel#" align="absmiddle" border="0" onclick="self.location='../report_manager/index.cfm'" /></a>
                            </cfoutput>
                        </td>
                    </tr>
                </table>
			</td>
		</tr>
    </table>
    </form>
</body>
</html>

iFrame Code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
	<table>
    	<tr>
        	<td>
            	<form id="frm2">
            	
				<CFOUTPUT QUERY="qryLODetails">
					<input type="checkbox" value="#lo_code#" name="ActivityList" />#lo_name#<br />
				</CFOUTPUT>
                
                </form>
			</td>
        </tr>
	</table>
</body>
</html>

I’m thinking that loading the values into some sort of hidden comma delimited string structure in the parent frame would do the trick, any ideas, and if I’m on the right track, how would I go about doing that? Also, you shouldn’t need to see the query or the report page code to help me with the javascript I require, but if you do need anything else please let me know!!

2

You can access the entire document just like a normal document. First, get a reference to the iframe using normal DOM Methods, then access it using the contentWindow property:

var ifr = document.getElementById('my_iframe');
var ifr_doc = ifr.contentWindow.document;

ifr_doc is now a reference to the document in the iframe (contentWindow is a reference to the window object of the iframe), so you can do things like this, say, to access an element in the iframe:

var firstDiv = ifr_doc.getElementsByTagName('div')[0];

Note that your access to the stuff in the iframe will be limited if the iframe is loaded from a different domain. If that’s the case, you’re better off doing this stuff on the server side.

3

Thanks for the reply Raffles, that helped and I managed to get it working, I appreciate it!