JavaScript DHTML/HTML/Iframe
Содержание
"allowTransparency" Example
<source lang="html4strict">
<html> <head> <script> function function1() {
document.all.frame1.allowTransparency = "false"; document.all.frame1.style.backgroundColor = "white"; document.all.frame2.allowTransparency = "true"; document.all.frame2.style.backgroundColor = "lightgreen";
} </script> </head> <body onLoad="function1();">
<iframe id="frame1" src="http://www.wbex.ru" allowTransparency="true" style="width:200;"> </iframe> <iframe id="frame2" src="http://www.wbex.ru" style="width:200;"> </iframe>
</body> </html>
</source>
"contentWindow" Example
<source lang="html4strict">
<html> <body> <script language="JavaScript">
function myLocation() {
alert(document.all.myFrame.contentWindow.location);
}
</script>
<iframe id="myFrame" src="http://www.wbex.ru" style="width:200;">
</iframe>
<button onclick="myLocation();">Location of Frame</button>
</body>
</html>
</source>
IFrame operation
<source lang="html4strict"> <iframe id="myFrame" frameborder="0" vspace="0" hspace="0" marginwidth="0"
marginheight="0" width="100%" src="external.html" scrolling="no" style="overflow:visible"></iframe>
function adjustIFrameSize(id) {
var myIframe = document.getElementById(id);
if (myIframe) {
if (myIframe .contentDocument && myIframe.contentDocument.body.offsetHeight) {
// W3C DOM (and Mozilla) syntax
myIframe.height = myIframe.contentDocument.body.offsetHeight;
} else if (myIframe.Document && myIframe.Document.body.scrollHeight) {
// IE DOM syntax
myIframe.height = myIframe.Document.body.scrollHeight;
}
}
}
<body ... onload = "adjustIFrameSize("myFrame");">
function adjustIFrameSize(id) {
var myIframe = document.getElementById(id);
if (myIframe) {
if (myIframe.contentDocument && myIframe.contentDocument.body.offsetHeight) {
// W3C DOM (and Mozilla) syntax
myIframe.height = myIframe.contentDocument.body.offsetHeight;
} else if (myIframe.Document && myIframe.Document.body.scrollHeight) {
// IE DOM syntax
myIframe.height = myIframe.Document.body.scrollHeight;
}
// bind onload events to iframe
if (myIframe.addEventListener) {
myIframe.addEventListener("load", resizeIframe, false);
} else {
myIframe.attachEvent("onload", resizeIframe);
}
}
} function resizeIframe(evt) {
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
// take care of W3C event processing from iframe"s root document
if (target.nodeType == 9) {
if (evt.currentTarget && evt.currentTarget.tagName.toLowerCase() == "iframe") {
target = evt.currentTarget;
}
}
if (target) {
adjustIFrameSize(target.id);
}
}
</source>
Reload iframe to another url
<source lang="html4strict">
<html> <head> <title>iFrame</title> </head> <body> <script type="text/javascript"> function handleResponse(choice) {
var pick = frames["MyFrame"]; pick.document.writeln(choice);
} </script> <iframe id="MyFrame"
name="MyFrame" style="width:800px; height:800px; border: 0px" src="http://www.wbex.ru"></iframe>
<a href="" onclick="parent.MyFrame.location.replace("1.html");return false">choice 1</a>
<a href="" onclick="parent.MyFrame.location.replace("2.html"); return false">choice 2</a>
</body> </html>
</source>
Update two iframes
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function twoframes(){
document.getElementById("frame1").src="http://www.wbex.ru"
document.getElementById("frame2").src="http://www.wbex.ru"
}
</script>
</head>
<body>
<iframe src="http://www.wbex.ru" id="frame1"></iframe>
<iframe src="http://www.wbex.ru" id="frame2"></iframe>
<form>
<input type="button" onclick="twoframes()" value="Change url of the two iframes">
</form>
</body>
</html>
</source>
