Q25 How can you find information about the contents of another frame?

You are here: irt.org | FAQ | JavaScript | Frame | Q25 [ previous next ]

If the documents within the two frames are from the same server then you can find out almost any of the JavaScript object model properties about the other frame.

First we need some means of navigating between the two documents, for the more simple items:

var variableName = parent.frameName.objectName.propertyName;

So for example if the parent frame contains the following frameset definition:

<frameset rows="50%,50%">
    <frame src="frameA.html" name="frameA">
    <frame src="frameB.html" name="frameB">
</frameset>

And frameA contains the contents we want to examine, then in frameB the following type of code can be used to examine frameA:

<html>
<head>
<script language="JavaScript"><!--
function loadForm() {
    document.detailForm.a.value = parent.frameA.location.href;
    document.detailForm.b.value = parent.frameA.document.title;
    document.detailForm.c.value = parent.frameA.document.alinkColor;
    document.detailForm.d.value = parent.frameA.document.bgColor;
    document.detailForm.e.value = parent.frameA.document.cookie;
    document.detailForm.f.value = parent.frameA.document.domain;
    document.detailForm.g.value = parent.frameA.document.fgColor;
    document.detailForm.h.value = parent.frameA.document.lastModified;
    document.detailForm.i.value = parent.frameA.document.linkColor;
    document.detailForm.j.value = parent.frameA.document.referrer;
    document.detailForm.k.value = parent.frameA.document.vlinkColor;
    document.detailForm.l.value = parent.frameA.document.images.length;
    document.detailForm.m.value = parent.frameA.document.links.length;
    document.detailForm.n.value = parent.frameA.document.forms.length;
    document.detailForm.o.value = parent.frameA.window.history.length;
    document.detailForm.p.value = parent.frameA.window.frames.length;
}
//--></script>
</head>

<body>
<h1>frameA details</h1>


<form name="detailForm">
<input type="button" value="Examine" onClick="loadForm()">
<table>
<tr><td>href        </td><td><input type="textbox" name="a" value="" size="40"></td></tr>
<tr><td>title       </td><td><input type="textbox" name="b" value="" size="40"></td></tr>
<tr><td>alinkColor  </td><td><input type="textbox" name="c" value="" size="8"></td></tr>
<tr><td>bgColor     </td><td><input type="textbox" name="d" value="" size="8"></td></tr>
<tr><td>cookie      </td><td><input type="textbox" name="e" value="" size="40"></td></tr>
<tr><td>domain      </td><td><input type="textbox" name="f" value="" size="40"></td></tr>
<tr><td>fgColor     </td><td><input type="textbox" name="g" value="" size="8"></td></tr>
<tr><td>lastModified</td><td><input type="textbox" name="h" value="" size="20"></td></tr>
<tr><td>linkColor   </td><td><input type="textbox" name="i" value="" size="8"></td></tr>
<tr><td>referrer    </td><td><input type="textbox" name="j" value="" size="40"></td></tr>
<tr><td>vlinkColor  </td><td><input type="textbox" name="k" value="" size="8"></td></tr>
<tr><td>images      </td><td><input type="textbox" name="l" value="" size="3"></td></tr>
<tr><td>links       </td><td><input type="textbox" name="m" value="" size="3"></td></tr>
<tr><td>forms       </td><td><input type="textbox" name="n" value="" size="3"></td></tr>
<tr><td>history     </td><td><input type="textbox" name="o" value="" size="3"></td></tr>
<tr><td>frames      </td><td><input type="textbox" name="p" value="" size="3"></td></tr>
</table>
</form>

<p><a href="../../faq.html">return target="_parent"</a>

</body>
</html>

If the documents within the two frames are from different servers then you are serverly restricted by what you can find out, either by Tainting in JavaScript 1.1 or Signing in JavaScript 1.2.