Frame/IFrame 对象

16-01-27 来源：[db:作者]

收藏我要投稿

对iframe排版

源代码

<!DOCTYPE html>
<html>
<body>

<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
<iframe id="myframe" src="http://w3cschool.cc">
  <p>Your browser does not support iframes.</p>
</iframe>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>

<script>
document.getElementById("myframe").align="right";
</script>

</body>
</html>

运行结果

改变一个包含在iframe中的文档的背景颜色

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function changeStyle()
{
var x=document.getElementById("myframe");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
y.body.style.backgroundColor="#0000ff";
}
</script>
</head>
<body>

<iframe id="myframe" src="demo_iframe.htm">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>

<input type="button" onclick="changeStyle()" value="Change background color">

</body>
</html>

运行结果

返回一个iframe中的frameborder属性的值

源代码

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="http://w3cschool.cc" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>

<p>The frameborder is set to:
<script>
document.write(document.getElementById("myframe").frameBorder);
</script>
<p>

</body>
</html>

运行结果

删除iframe的frameborder

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function removeBorder()
{
document.getElementById("myframe").frameBorder="0";
}
</script>
</head>
<body>

<iframe id="myframe" src="http://w3cschool.cc">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>

<input type="button" onclick="removeBorder()" value="Remove border">

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

</body>
</html>

运行结果

改变iframe的高度和宽度

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function changeSize()
{
document.getElementById("myframe").height="300";
document.getElementById("myframe").width="300";
}
</script>
</head>

<body>
<iframe id="myframe" src="http://w3cschool.cc" height="200" width="200">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>

<input type="button" onclick="changeSize()" value="Change size">

</body>
</html>

运行结果

返回一个iframe中的longdesc属性的值

源代码

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="http://w3cschool.cc" longdesc="w3s.txt">
<p>Your browser does not support iframes.</p>
</iframe>

<p>The URL of the long description is:
<script>
document.write(document.getElementById("myframe").longDesc);
</script>
<p>

</body>
</html>

运行结果

返回一个iframe中的marginheight属性的值

源代码

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="demo_iframe.htm" marginheight="50" marginwidth="50">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>

<p>The value of the marginheight attribute is:
<script>
document.write(document.getElementById("myframe").marginHeight);
</script>
<p>

</body>
</html>

运行结果

返回一个iframe中的marginwidth属性的值

源代码

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="demo_iframe.htm" marginheight="50" marginwidth="50">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>

<p>The value of the marginwidth attribute is:
<script>
document.write(document.getElementById("myframe").marginWidth);
</script>
<p>

</body>
</html>

运行结果

返回一个iframe中的name属性的值

源代码

<!DOCTYPE html>
<html>
<body>

<iframe id="myframe" src="http://w3cschool.cc" name="myframe">
<p>Your browser does not support iframes.</p>
</iframe>

<p>The name of the iframe is:
<script>
document.write(document.getElementById("myframe").name);
</script>
<p>

</body>
</html>

运行结果

返回和设置一个iframe中的scrolling属性的值

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function removeScroll()
{
document.getElementById("myframe").scrolling="no";
}
</script>
</head>
<body>

<iframe id="myframe" src="http://w3cschool.cc" scrolling="auto">
<p>Your browser does not support iframes.</p>
</iframe>

<p>The value of the scrolling attribute is:
<script>
document.write(document.getElementById("myframe").scrolling);
</script>
<p>

<input type="button" onclick="removeScroll()" value="Remove Scrollbars">

<p>Internet Explorer, Google Chrome, Opera, and Safari have problems with setting the scrolling attribute.</p>

</body>
</html>

运行结果

改变一个iframe的src

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function changeSrc()
{
document.getElementById("myframe").src="http://www.baidu.com";
}
</script>
</head>
<body>

<iframe id="myframe" src="http://w3cschool.cc">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>

<input type="button" onclick="changeSrc()" value="Change Source">

</body>
</html>

运行结果

点击复制链接与好友分享!回本站首页