Posted by: prajapatinilesh | February 13, 2008

IFrame Concept – Javascript Unknown method

What are FRAME, FRAMESET and IFRAME?

Every web designer would generally know what a FRAME (or FRAMESET) on a web page does. It simply maintains its own content without having any relation to other FRAMES.
A web page may be divided into several blocks using FRAMES. Every FRAME is generally assigned its own web page. The beauty of the FRAME is that it would never refresh unnecessarily for every post back of the web page. Only the FRAME on which the user is working gets refreshed, not the others.
To work with FRAME, we need to define FRAMESET. The FRAMESET internally contains FRAMEs divided logically based on necessity. Not every browser supports FRAMEs, but the majority of browsers do.
What about IFRAME? Another word for IFRAME is “Inline FRAME.” It is treated as a part of the web page (and not a web page part of FRAME, as in the previous case). The IFRAME is a small block on our web page which can be treated as a “nested browser” within our web page. This feature opens the door for displaying/showing other web pages as a part of our web page. But again a word of caution, not every browser supports it yet.
An IFRAME is very useful when we want to display the content from other web sites. We can also write some information (probably HTML) to IFRAME dynamically, treating it as a dynamic page itself.

The other main difference between floating and normal frames, is that floating frames accept WIDTH, HEIGHT and standard <IMG> HSPACE, VSPACE and ALIGN attributes, to set the display size and alignment of the frame within the document.

some Attributes of iframe (inline frame) – floating frame.
TITLE=”informational ToolTip”
LANG=”language setting”
LANGUAGE=”Scripting language”
CLASS=”Style Sheet class name”
STYLE=”In line style setting”
ID=”Unique element identifier”
BORDER=”Border Size”
BORDERCOLOR=”#rrggbb or Colour Name”
DATAFLD=”Column Name”
DATASRC=”Data Source”
frameBORDER=”Sets Border”
NAME=”frame Name”
SCROLLING=”Scrollbars”

Iframe support following javascript properties:
className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title

And its own attributes described above: align, border, borderColor, dataFld, dataSrc, frameBorder, height, hspace, scrolling, src, vspace and width .

Iframe support following javascript methods:
click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute

Iframe support following javascript events:
onblur , onfocus, onload, onunload

Example:

<html>
<head>
<script id=”clientEventHandlersJS_1″ language=”javascript”>
<!–
function Show()
{
// get our iframe
var testFrame = document.getElementById(“myFrame”);
var val;
val = “<TABLE border=1>”;
val += “<TR><TD>SR.No</TD><TD>Name</TD></TR>”;
val += “<TR><TD>1</TD><TD>Test</TD></TR>”;
val += “</TABLE>”;
// now write out the new contents
var doc = testFrame.contentDocument;
if (doc == undefined || doc == null)
doc = testFrame.contentWindow.document;
doc.open();
doc.write(val);
doc.close();
document.all.myFrame.style.visibility=”visible”;
}

function Button1_onclick() {
Show();
}
//–>
</script>
</head>
<body>
<iframe id=”myFrame” frameborder=”0″ vspace=”0″ hspace=”0″ marginwidth=”0″
marginheight=”0″ width=”100″ scrolling=yes height=”100″
style=”BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 999; LEFT: 20px; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 100px; visibility:hidden;”></iframe>

<form id=”form1″>
<input type=”button” value=”Show” id=”Button1″ name=”Button1″ onclick=”return Button1_onclick()”>
</form>
</body>
</html>

Javascript Method: – just for refrence you need to use your way

1) <P ID=”para1″>Some <STRONG ID=”str1″>strong, bold</STRONG> text</P>
alert (para1.contains(str1)) would return true.
2) varCol=document.all.MySpan.getAttribute(“BGCOLOR”,false)
second arguments for specifying whether or not the search to find the attribute is case-sensitive or not.
3) document.all.tags(“P”).item(1).insertAdjacentHTML(“BeforeBegin”, “<P>Here’s a new paragraph”)
would add <P>Here’s a new paragraph before the second paragraph in the document.

Note: May be this method is no longer supported by some browser .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: