iframe
时间: 2023-07-06 13:11:00 浏览: 52
iframe 是 HTML 中的一个标签,用于在当前页面内嵌入另一个 HTML 页面。通过 iframe 标签,可以在当前页面中显示来自其他域名或同一域名下的另一个页面的内容。
以下是一个简单的 iframe 示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>IFrame 示例</title>
</head>
<body>
<h1>IFrame 示例</h1>
<p>以下是嵌入的另一个页面:</p>
<iframe src="http://www.baidu.com" width="800" height="600"></iframe>
</body>
</html>
```
在这个示例中,我们使用了一个 iframe 标签,其中 `src` 属性指定了要嵌入的页面地址,`width` 和 `height` 属性指定了 iframe 的宽度和高度。在这个示例中,我们嵌入了百度的首页,所以在当前页面中会显示百度的首页内容。
相关问题
iframe.contentWindow, 获取iframe的window对象iframe.contentDocument, 获取iframe的document对象
在JavaScript中,`iframe.contentWindow` 和 `iframe.contentDocument` 是用来与嵌套在父页面内的IFrame(内联框架)进行交互的重要属性。这些属性允许你访问到IFrame内的窗口和文档对象,以便于操作其内容。
1. `iframe.contentWindow`[^4]: 这个属性返回的是嵌入在IFrame中的页面的全局窗口对象。你可以通过这个窗口对象来访问IFrame中的所有全局变量、函数和DOM元素,就像它们是在IFrame的主窗口中一样。例如:
```javascript
var iframe = document.getElementById('myIframe');
var iframeWindow = iframe.contentWindow;
console.log(iframeWindow.document.body); // 输出IFrame的body元素
```
2. `iframe.contentDocument`[^4]: 这个属性返回的是IFrame中的完整HTML文档对象。这意味着你可以通过它来访问和操作IFrame内的HTML结构,如创建节点、修改样式等:
```javascript
var iframeDoc = iframe.contentDocument;
var iframeElement = iframeDoc.getElementById('someElement'); // 获取IFrame内的特定元素
iframeElement.style.color = 'red'; // 修改IFrame内元素的颜色
```
请注意,这两个属性仅适用于同源策略允许的情况,即如果嵌入的IFrame是从同一个域加载的。对于跨域的IFrame,由于安全限制,你可能无法直接访问其window或document对象。
iframe1 调用 iframe2函数
使用window.frames来获取iframe2的window对象,然后就可以调用iframe2中的函数了。具体实现代码如下:
```javascript
var iframe2 = window.frames['iframe2'];
iframe2.func();
```
其中,'iframe2'是iframe2的name属性值,func()是iframe2中需要调用的函数名。