js实例Frame/IFrame 对象

发布时间:2018-11-21 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例Frame/IFrame 对象脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
对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="https://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> 

&nbsp;

运行结果

改变一个包含在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="https://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="https://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="https://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="https://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="https://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="https://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="https://www.baidu.COM"; } </script> </head> <body>  <iframe id="myframe" src="https://w3cschool.cc"> <p>Your browser does not support iframes.</p> </iframe> <br><br>  <input type="button" onclick="changeSrc()" value="Change Source">  </body> </html> 

 

运行结果


对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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://www.baidu.com"; } </script> </head> <body>  <iframe id="myframe" src="https://w3cschool.cc"> <p>Your browser does not support iframes.</p> </iframe> <br><br>  <input type="button" onclick="changeSrc()" value="Change Source">  </body> </html> 

 

运行结果


觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例Frame/IFrame 对象全部内容,希望文章能够帮你解决js实例Frame/IFrame 对象所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。