iframe element | iframe object (Internet Explorer)

Switch View :

Classic

Lightweight

ScriptFree

Site Feedback

iframe element | iframe object

[This documentation is preliminary and is subject to change.]

Creates inline floating frames.

Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5

Standards information

Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5
HTML 4.01 Specification, Section 16.5

HTML information

Closing Tag	required
CSS Display	block

DOM Information

Inheritance Hierarchy

Node

Element

HTMLElement

iframe

Remarks

The iframe element functions as a document within a document, or like a floating frame. The frames collection provides access to the contents of an iframe. Use the frames collection to read or write to elements contained in an iframe. For example, the syntax for accessing the backgroundColor style of the body object in an iframe is:


sColor = document.frames("sFrameName").document.body.style.backgroundColor;

You can access the iframe object's properties, but not its contents, through the object model of the page where the iframe object resides. For example, the syntax for accessing the border style of the iframe object is:


sBorderValue = document.all.oFrame.style.border;

Note Properties of the iframe must be accessed using the prefix, document.all, for example, document.all.iframeId.marginWidth.

Security Warning: To protect user privacy and safeguard your applications, Windows Internet Explorer restricts some interactions between frames that host Web pages from different domains. To treat the content of the iframe as if it were in the Restricted Sites zone, set the SECURITY attribute to "restricted." For more information about using the Dynamic HTML (DHTML) object model with the frame and iframe objects, see About Cross-Frame Scripting and Security and Security Considerations: Dynamic HTML.

Windows Internet Explorer 8 and later. The values of the longDesc and src attributes depend on the current document compatibility mode.

Windows Internet Explorer 7 and later. For security reasons, resizing is disabled for iframe objects that display content hosted on a domain different from the domain hosting the parent document. If you trust the content you are loading into an iframe object, you can enable resizing by specifying values for the minWidth and maxWidth attributes of the iframe element in the source of the parent document. You must specify values for both attributes to enable resizing.

Microsoft Internet Explorer 5.5 supports transparent content with inline floating frames. The following conditions must be met to define transparent content for inline floating frames.

The allowTransparency attribute, used with the iframe element, must be set to true.
In the iframe content source document, the backgroundColor attribute of the body element must be set to transparent.

See Using Transparency with Inline Floating Frames for more information on transparent floating frames.

Examples

This example uses the iframe element and an HTML fragment to create a frame containing the page sample.htm.


<IFRAME ID=IFrame1 FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm"></IFRAME>

This example returns a reference to the all collection of the document contained by the iframe.


var collAll = document.frames("IFrame1").document.all

Internet Explorer iframe will not stop attempts to load a file that was deleted off the server and was changed in src="NewFile.htm" in the object. $0$0 $0 $0Cleared or deleted Internet Explorer temporary internet files several times.$0 $0Rebooted the computer to clear memory. $0 $0$0 $0 $0Fix was to rename the iframe id & name or stop using the Name Property.$0 $0$0 $0 $0Best Guess is with use of the Name Property. Internet Explorer created an array iframes. $0 $0similar in nature to getElementsByTagName and not writing Internet Explorer is doing this but similar to this. $0 $0By loading a ghost iframe not loaded from the temporary internet files folder.$0 $0$0 $0 $0Unlike the uses of the Name Property in Frameset & Frame objects.$0 $0$0 $0

titang4ppc

Printing iframefrom within showModelessDialog/showModalDialog window

iframes don't seem to get focus from within showModelessDialog/showModalDialog windows when it comes to printing the contents of the frame. It also doesn't seem to like printing its own contents from a standard window.open window
I have included a small example where it fails
eg.
1. script1.htm
...
   gWindowPtr.oDocument.oToolbarPanel.doPrintPreviewCmd = function(){
    return (this.doPrintCmd(7, 2));
   }
   gWindowPtr.oDocument.oToolbarPanel.doPrintCmd = function(OLECMDID, PROMPT){
    var prn = new oCPRNTManager();

    prn.id   = 'srch';
    prn.winPtr  = gWindowPtr.oDocument;
    prn.OLECMDID = (OLECMDID != null) ? OLECMDID : 6;
    prn.PROMPT  = (PROMPT != null) ? PROMPT : 2;

    prn.doPrintCmd();
   }
   gWindowPtr.oDocument.doPrintCmd = function(opts){ // TODO:
    var s = '';
    // Do print logic
    s = this.oSearchPanel.div.innerHTML + '\n' + this.oFilePanel.div.innerHTML;
    return (s);
   }

   gWindowPtr.oDocument.doSpoolCmd = function(f){
    var prn = new oCPRNTManager();

    prn.doSpoolCmd(this.prnQueue, f); // Calling this function which is in 2. prntmngr.js
   }
...

2.prntmngr.js
...
function oCPRNTManager(){

//this.CLASSID = 'CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'; // should be RO

// The user needs to set these before calling doPrintCmd()
this.id   = '';       // This is a ref# to id in RSRC/WDDX/prntScreens.wddx
this.params  = new Object();     // Can set any number of keys to be passed to [oRef].Main(params) within prntDialog.htm
this.winPtr  = null;       // Reference object that will be called once the dialog returns a non null

this.OLECMDID = 6;       // RW : 6 - print; 7 - print preview; { 1 - open window; 4 - Save As }
this.PROMPT  = 1;       // RW : 1 - prompt; 2 - don't prompt

this.doPrintCmd = function(){
  var dilg   = new oCDialog();
  var output = dilg.showModalDialog(null , null, 'printDialog.htm', this, 'dialogWidth:480px;dialogHeight:370px;center:yes;resizable:no;scroll:no;status:no;unadorned:yes;help:yes');

  if(output == null) { return (null); }
  var f    = this.winPtr.div.appendChild(document.createElement('IFRAME'));
  f.id    = 'oPrintFrame_' + (new Date()).valueOf();
  f.style.width = f.style.height = 0;
  f.style.top   = f.style.left   = 0;

  this.winPtr.prnQueue[this.winPtr.prnQueue.length] = { oDoc : output, frame : f, OLECMDID : this.OLECMDID, PROMPT : this.PROMPT, cb : window.setInterval('document.all.' + this.winPtr.div.id + '.oPtr.doSpoolCmd(document.all.' + f.id + ')', 1000) };
}
this.doSpoolCmd = function(prnQueue, f){ // TODO:
  var i;
  var obj = eval(f);
  if(obj.readyState == 'complete'){
   for(i = 0; i < prnQueue.length; i++){
    if(prnQueue[i].frame == obj){
     window.clearInterval(prnQueue[i].cb);
     obj.contentWindow.document.body.innerHTML = prnQueue[i].oDoc;

     var po   = obj.contentWindow.document.body.appendChild(obj.contentWindow.document.createElement('OBJECT'));
     po.classid  = 'CLSID:8856F961-340A-11D0-A96B-00C04FD705A2';
     po.style.width = po.style.height = 0;
     obj.focus();

     // ************* FAILS *******************

     po.ExecWB(prnQueue[i].OLECMDID, prnQueue[i].PROMPT);
     // ************* FAILS ******************* -> Error: This command not supported within error dialog

     po.outerHTML = '';
/*
     prnQueue[i].frame.removeNode(true);
     prnQueue[i].oDoc = null;
     prnQueue[i].frame = null;
     prnQueue[i].OLECMDID = null;
     prnQueue[i].PROMPT = null;
     prnQueue[i].cb   = null;
     prnQueue[i]   = null;

     prnQueue = compressArray(prnQueue);
*/
     break;
    }
   }
  }
}
return (this);
}

Also when it comes to printing from a standard non dialog window, eg:
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="pragma" content="no-cache">

<script language="JavaScript" type="text/javascript">

  // Start of Program
  function Main(){
   var obj = document.all.oPrintFrame;
   obj.contentWindow.document.body.innerHTML = 'hi3'+ ' <OBJECT CLASSID=\'clsid:8856F961-340A-11D0-A96B-00C04FD705A2\' id=\'WebBrowser\' WIDTH=\'0\' HEIGHT=\'0\' ></OBJECT> ';
   obj.focus();
   obj.contentWindow.document.all.WebBrowser.ExecWB(7, 2); // or ExecWB(6, 2)
  }
</script>
</head>
<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" alink="#0000FF" link="#0000FF" vlink="#0000FF" onload="Main();">
<div id="oDilgWin" style="width:1024;height:803;background-color:'#D4D0C8';"></div>

<iframe id="oPrintFrame" name="oPrintFrame" width="100" height="100"></iframe>
</body>
</html>
...

The output for both the print and print preview shows the document and the frame, NOT the contents of the frame!!!

SathishPerumal

Access / Permission denied to work with object which lying on IFRAME , FRAME

I am using VBScript to work with my application website. Through this script I am trying to access content which lying on frame object. Following script I have used but it throws me error "Access Denied". I have gone through lots of document to get solution for it but did not succeed. I am using IE 6 as browser. I gone through Article ID : 324020 published on msdn site which mentioned that "A fix for this issue is available in Internet Explorer 5.5 Service Pack 2 (SP2). However, this fix has not been ported to Internet Explorer 6.".

"****************** Code Started here ***************************
Dim ie
Set objIE = CreateObject("InternetExplorer.Application")
objIE.Visible = True
objIE.Navigate2 url
WaitForLoad(ie)
objIE.Document.All("username").Value = UserName
objIE.Document.All("password").Value = Password
' Find a link to click
Set objLink = GetLinkByHref(objIE, "javascript:submitForm();")
' If found, then click it
If (False = IsNull(objLink)) Then
objLink.Click
WaitForLoad(objIE)
End If
tagName = "IFRAME"
Set coll = objIE.Document.All.tags(tagName)
If coll.length 0 Then
For i = 0 To coll.length
If coll(i).getAttribute("name") = "ContentIframe" Then
coll(i).allowTransparency = True
coll(i).style.backgroundColor = "transparent"
Msgbox objIE.document.All("ContentIframe").Document.body.innerHTML
End If
Next
End If

' Gets Link by 'href' attribute.
' Note: If your need, you can write another function - GetLinkByText
Private Function GetLinkByHref(ie, href)
Dim Link
For Each Link In ie.Document.Links
If Instr(LCase(Link.href), LCase(href)) 0 Then
Set GetLinkByHref = Link
Exit Function
End If
Next
Set GetLinkByHref = Nothing
End Function
''******************* Code End here **********************************
For statement MsgBox
objIE.document.All("ContentIframe").Document.body.innerHTML VBScript displays "Access Denied" error.

Following are my question:
1] Is possible to get frame element through VBScript If yes then please let me know correct way. Here I am explicitly setting "allowTransparency"
property to true and "style.backgroundColor" property to "transparent". Is it correct way of doing it?

2] Should I install IE 5.5 SP2 to verify the correct result?

It would great if somebody helps me.

Thanks

Siddharth

Thanks

##################################################################################
##################################################################################

Hi Siddharth,

I am also facing the same problem which trying to read the iframe element using VB script.
Please help me on this.

Regards,
Sathish

ZeroWorks

document.createElement(“iframe”) - Solution in IE

Following to george_5154 comments, when a iframe is created with createElement it doesn's works as expected, returned object from createElement seems not to be the new created iframe object. But, if you get object from frames collection, retrieved object works fine.

var o=document.createElement('IFRAME');
o.name='newiframe';
document.body.appendChild(o);

alert(o.name); // o does not refers to created iframe...

for(var i=0;i<document.frames.length;i++)
{
o=document.frames[i];
if(o.name=='iframe')
break;
}

alert(o.name); // Now o refers to created iframe

This code provided is only for testing in IE and demonstrate its behaviour.

Hope it helps somebody.

JohnPage

NORESIZE - documentation is wrong

The NORESIZE property does not apply to iframes according to W3C:

" Inline frames may not be resized (and thus, they do not take the noresize attribute)."

george_5154

document.createElement(“iframe”) UNRELIABLE in IE

Dynamically created iframes behave differently from those embedded in the HTML document. Do not waste your time (as I did). If you plan to upload a file without having to reload the page, don’t try using document.createElement to create the iframe, that will work with all browsers except IE. Instead put the iframe directly in the HTLM code and save yourself hours of frustration.

UPDATE:
See the workaround above!