contentDocument
Definition and Usage:
The contentDocument property returns the Document object generated by a frame or iframe element.
This property can be used in the host window to access the Document object that belongs to a frame or iframe element.
Note: Because of security reasons, the contents of a document can be accessed from another document only if the two documents are located in the same domain.
Syntax:
frameObject.contentDocument or iframeObject.contentDocument
eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
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>
contentWindow
Definition and Usage:
The contentWindow property returns the Window object generated by a frame or iframe element (through the window object, you can access the document object and then any one of the document's elements).
Syntax:
frameObject.contentWindow or iframeObject.contentWindow
相关推荐
`contentWindow` 和 `contentDocument` 是两个非常重要的JavaScript属性，它们用于在iframe之间进行通信和操作。 `contentWindow` 是一个对象，它代表了嵌入在iframe中的窗口，即子窗口的`window`对象。通过这个...
1. **JavaScript监听滚动事件**：通过监听iframe的`load`事件，当内容加载完成后，获取iframe的contentWindow或contentDocument对象，计算其高度并赋值给iframe的height属性。 2. **使用postMessage通信**：如果...
这里要理解框架的两个属性 contentWindow 和contentDocument 两个属性的意思和window document意思差不多，不同的是contentWindow 所有浏览器都支持，contentDocument ie6,7不支持，chrome 也不支持 <iframe ...
- 获取`iframe`内容页面的实际高度：通过JavaScript获取`iframe`的`contentWindow`或`contentDocument`对象，然后获取它们的高度属性，如`document.body.scrollHeight`或`document.documentElement.scrollHeight`。...
3. **监听`load`事件**：当`iframe`内的页面加载完成后，我们可以通过`contentWindow`和`contentDocument`属性访问到`iframe`内的`window`和`document`对象，进而获取其内容的高度。 ```javascript iframe.onload...
- 一个常见的方法是利用`onload`事件监听Iframe的加载完成，然后通过JavaScript获取Iframe的contentDocument（或contentWindow.document，取决于浏览器兼容性）的body高度，将其设置为Iframe的高度。 2. **跨域...
2. **IE8**：虽然支持`contentWindow`和`contentDocument`，但没有`MutationObserver`，所以需要在`window.onload`或`iframe.onload`事件中处理高度自适应。 3. **Firefox**：Firefox通常能较好地处理`iframe`，但...
- 使用`win.contentDocument`和`win.contentWindow`分别获取`iframe`内部的`document`对象。 - 计算`body.offsetHeight`或`body.scrollHeight`来获取内容的实际高度。 3. **设置`iframe`的高度：** - 将计算出的...
这段代码中，通过`iframeid.contentDocument.body.offsetHeight`或者`iframeid.contentWindow.document.body.scrollHeight`来获取内部页面的高度，并将其设置为`<iframe>`的高度。 ##### 2. 动态调整`<iframe>`的...
`adjustIframeHeight`函数接收一个`<iframe>`元素作为参数，通过访问`contentWindow`和`contentDocument`属性获取子文档的高度，并将其设置为`<iframe>`的高度。这样，无论`<iframe>`内部的内容如何变化，其高度都能...
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; iframeDoc.head.innerHTML = '<style>@media print {...}</style>'; iframeDoc.body.innerHTML = '这是页眉</header><main>打印内容...
总结一下，本文主要介绍了如何在JavaScript中获取Iframe内容，包括非跨域情况下的`contentWindow`和`contentDocument`属性，以及跨域通信的`PostMessage`方法。通过这些技术，开发者可以有效地处理Iframe相关的复杂...
3. **iframe的contentWindow和contentDocument**：`contentWindow`属性提供了对iframe内窗口的直接访问，你可以通过它调用window对象的方法，如`contentWindow.location.href`改变iframe加载的页面。而`...
获取到`iframe`元素后，我们可以通过`contentWindow`属性访问`iframe`中的`window`对象，如果是同源策略允许的，还可以通过`contentDocument`访问`iframe`的`document`对象。例如： ```javascript var iframe...
2. **获取iframe的contentWindow和contentDocument**： - `contentWindow`属性是`iframe`的全局对象，相当于内部页面的`window`对象，可以访问内部页面的JavaScript环境。 - `contentDocument`属性返回`iframe`中...
原因是Opera浏览器在处理`iframe`内容时使用`contentWindow`而不是`contentDocument`。因此，针对Opera的调整是必要的。 改进后的JavaScript函数如下： ```html function SetCwinHeight(obj) { var cwin = obj...
在同一个域下，可以使用`contentWindow`或`contentDocument`属性来访问`iframe`中的内容。例如，假设`iframe`的ID为`myIframe`，我们可以这样获取其内容： ```javascript var iframe = document.getElementById('...
可以监听`load`事件，当`iframe`加载完成后，通过`contentWindow`和`contentDocument`属性获取内容的尺寸，然后调整`iframe`的大小。例如： ```javascript document.getElementById('myIframe').addEventListener('...
2. 获取iframe的contentWindow和contentDocument： ```javascript var iframeWin = iframe.contentWindow; var iframeDoc = iframe.contentDocument || iframeWin.document; ``` 3. 将要打印的区域复制到iframe中：...