My first attempt failed both in Internet Explorer and Firefox, worst in Firefox which announced that iframe.document didn’t have any properties, and in Internet Explorer the div element was placed after the iframe
element not inside intended.To configure this script,first, set the variables inside the script of Step 1 per the comments. As you can see, you can specify more than one iframe on the page in which the
script should dynamically Auto Adjust (resize).where "myframe" is the ID of the IFRAME you wish to load a page into, and "iframe.aspx", the
path to the page on your site to load.But happy to have found myself.
iframe code
- Opening tag
- iframe page source
- height of the iframe
- width of the iframe
- Non-iframe content (What to display in the users' browser if they are not capable of viewing iframes.)
- Closing tag
| src |
Specified the URL of the document to be displayed in the frame.
src="FileName.html" |
| name |
Specifies the name of the frame for the purpose of linking and targeting.
name="MyIframe" |
width
height |
Specifies the width/height of the iframe space in pixels or percentages.
width="200" height="100" |
| align |
Aligns the iframe to the left, center, or right side of the page.
align="center" |
| noresize |
Kills the visitors ability to resize the iframe borders manually.
noresize="noresize" |
| scrolling |
Indicates the ability of a scrollbar to appear (or not) with a value of yes, no, or auto.
scrolling="auto" |
| frameborder |
Carries a value of 0 or 1 depending if you want a border to appear around the iframe or not.
frameborder="1" |
marginwidth
marginheight |
Specifies the width/height of the margin in pixels.
marginwidth="1" marginheight="1" |
vspace
hspace |
Specifies the verticle/horizontal margin space in pixels.
vspace="1" hspace="1" |
Accessing the document inside an iframe
When dealing with inline frames (iframe), it is common to have the need to access the document loaded into the iframe.
Default.aspx Page <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe id="myframe" name="myframe" frameborder="1" scrolling="no" src="Default2.aspx"></iframe>
</div>
</form>
</body>
</html>
Copy Page Javascript function on Default.aspx Page.
//created by
Aamir Hasan //Date April,1 2010
function doIframe() {
o = document.getElementsByTagName('iframe');
for (i = 0; i < o.length; i++) {
setHeight(o[i]);
addEvent(o[i], 'load', doIframe);
}
}
function setHeight(e) {
if (e.contentDocument) {
e.height = e.contentDocument.body.offsetHeight + 35;
} else {
e.height = e.contentWindow.document.body.scrollHeight;
}
}
function addEvent(obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent("on" + evType, fn);
return r;
} else {
return false;
}
}
if (document.getElementById && document.createTextNode) {
addEvent(window, 'load', doIframe);
}
Warning
In order to support the most browsers with the least headaches, it is best to use the highly-compatible "DOM0" frames collection, which is a child of window.
Inlcude jquery.js in your Default.aspx Page
jquery.js (122.64 kb)
Compatibility
This code has been tested on and is known to work in:
- Internet Explorer 6 (Win), 5.5 (Win)
- Mozilla 1.7.5 (all) - Firefox 1.0 - Filefox 3.6.2
- Safari 1.2.4, Safari 3.1.1
- Opera 7.54 (Win), Opera 9.8 (Win)
Author:
Aamir Hasan औथोर:
आमिर हसन أثر
أمير حسن .
3820fa11-4610-4a35-b770-a24ef037ace4|0|.0
Ajax, asp.net, HTML, JQuery
asp.net, html, jquery, iframe