Iframe交互语法_iframe交互资源-CSDN文库

需积分: 50 15 浏览量 2008-10-27 02:33:51 上传评论收藏 6KB TXT 举报

### Iframe交互语法详解 #### 一、Iframe基本语法及属性 Iframe（Inline Frame）是一种HTML标签，用于在当前网页中嵌入另一个网页或文档。它支持一系列的属性来控制显示效果。 ##### 1. 基本语法： ```html <iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> ``` - **`src`**：指定要嵌入的网页或文档的URL地址。 - **`width`** 和 **`height`**：设置Iframe的宽度和高度，可以是具体的数值或百分比。 - **`scrolling`**：设置是否显示滚动条。可选值为： - `no`：不显示滚动条； - `auto`：自动显示滚动条，当内容超出时出现； - `yes`：始终显示滚动条。 - **`frameborder`**：设置边框是否可见。默认值为1，表示显示边框；0表示不显示边框。示例代码： ```html <iframe src="https://www.example.com" width="250" height="200" scrolling="no" frameborder="0"></iframe> ``` #### 二、Iframe与页面元素的交互 Iframe不仅仅是一个简单的容器，还可以通过JavaScript等脚本语言与页面其他元素进行交互。 ##### 1. 通过ID访问Iframe 可以通过给Iframe添加一个ID来获取其引用，并通过DOM操作访问Iframe内的元素。示例代码： ```html <iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe> ``` 其中，`test.htm`包含了一个`<h1>`标签： ```html  <html> <body> <h1 id="myH1">hello,myboy</h1> </body> </html> ``` 通过JavaScript可以修改`myH1`的内容： ```javascript document.getElementById('test').contentDocument.getElementById('myH1').innerText = "hello,mydear"; ``` ##### 2. 父窗口与子Iframe之间的交互父窗口与子Iframe之间的交互通常涉及跨域问题，但当两者位于同一域名下时，可以通过`window.parent`和`window.frames`对象来实现通信。示例代码： ```html  <html> <body onclick="alert(window.frames['tt'].document.getElementById('myH1').innerHTML)"> <iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe> <h1 id="myH2">hello,mywife</h1> </body> </html> ``` 其中，`frame1.htm`包含一个`<h1>`标签： ```html  <html> <body> <h1 id="myH1">hello,myboy</h1> </body> </html> ``` 通过JavaScript可以在`example.htm`中修改`frame1.htm`中的`myH1`内容： ```javascript window.parent.document.getElementById('myH2').innerText = "hello,myfriend"; ``` #### 三、Iframe的其他属性与用法除了上述基本属性外，Iframe还支持其他属性，例如`align`、`frameBorder`等，可以进一步调整显示样式。 ##### 1. 设置对齐方式通过`align`属性可以设置Iframe的对齐方式： ```html <iframe src="example.com" width="300" height="200" align="left"></iframe> ``` ##### 2. 自动滚动通过JavaScript可以实现在Iframe内部自动滚动的效果： ```html  <!DOCTYPE html> <html> <head> <title>Iframe滚动示例</title> <script type="text/javascript"> function scroll(n) { var temp = n; document.getElementById('Out1').scrollTop = document.getElementById('Out1').scrollTop + temp; if (temp == 0) return; setTimeout("scroll(temp)", 80); } </script> </head> <body onload="scroll(1)"> <div id="Out1" style="width:100%; height:100px; overflow:auto; border-style:dashed; border-width:1px;"> <div style="height:500px;">这是一个测试Iframe自动滚动的例子。</div> </div> </body> </html> ``` #### 四、注意事项与限制 1. **兼容性**：不同的浏览器对于Iframe的支持程度有所不同，特别是早期版本的浏览器可能不支持某些属性或功能。 2. **安全性**：跨域安全策略限制了不同源之间Iframe的交互能力。 3. **性能考虑**：过多地使用Iframe可能会导致页面加载速度变慢。 Iframe不仅能够简单地嵌入内容，还能通过各种方式与页面进行互动，提高用户体验。但在实际应用中需要注意其兼容性和安全性等问题。

展开

资源推荐

资源评论