JavaScript DHTML/HTML/Iframe
Содержание
"allowTransparency" Example
<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>
"contentWindow" Example
<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>
<br>
<button onclick="myLocation();">Location of Frame</button>
</body>
</html>
IFrame operation
<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);
}
}
Reload iframe to another url
<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>
<p>
<a href="" onclick="parent.MyFrame.location.replace("1.html");return false">choice 1</a><br />
<a href="" onclick="parent.MyFrame.location.replace("2.html"); return false">choice 2</a><br />
</p>
</body>
</html>
Update two iframes
<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>
<br>
<form>
<input type="button" onclick="twoframes()" value="Change url of the two iframes">
</form>
</body>
</html>