解决一个让iframe的高度自适应src文件的高度，提供两种解决方法：
main.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>main</title>
<script>
//方法1
var iframe_inner = function( h ){
document.getElementById('frame').height = h;
alert("方法1---" + h);
}
//方法2
window.onload = function(){
var iObj = document.getElementById('frame');
var height = iObj.contentWindow.document.documentElement.scrollHeight;
iObj.height = height;
alert("方法2---" + height);
};
</script>
</head>
<body>
<iframe src="src.html" id="frame" />
</body>
</html>
src.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>src</title>
<script>
window.onload = function(){
parent.iframe_inner(document.documentElement.scrollHeight);
}
</script>
</head>
<body style="height:300px;">
</body>
</html>
分享到：
相关推荐
在JavaScript中，操作`iframe`内的DOM元素是常见的需求，特别是在构建复杂的网页应用时。`iframe`（Inline Frame）是一种可以在HTML文档中嵌入另一个HTML文档的元素，它允许我们实现页面分隔、加载外部资源或者创建...
如果父页面和iframe页面不是同源的，那么在某些浏览器中通过JavaScript访问对方的DOM元素可能会遇到跨域访问控制（CORS）的限制。这时可能需要服务器端的支持，例如设置适当的CORS响应头，或者使用postMessage API...
这个函数使用jQuery的方法来访问iframe中的DOM元素。首先，通过“$("#frame_1")”选择器找到id为“frame_1”的iframe元素。然后，通过调用“.contents()”方法获取iframe的文档内容，这会返回iframe的Document对象。...
接下来，我们需要访问iframe的`contentWindow`或`contentDocument`属性。`contentWindow`属性返回iframe的全局window对象，而`contentDocument`则返回iframe内部的文档对象。由于同源策略的限制，只有当iframe加载的...
JavaScript可以通过DOM（Document Object Model）来操作IFrame，包括获取IFrame、修改其属性、以及与IFrame内的页面进行通信。 - **获取IFrame**：使用`document.getElementById`或`document.querySelector`等方法...
根据提供的代码片段，“获取父页面iframe中id为name的元素值”，这里涉及到如何通过JavaScript访问`iframe`内的DOM元素： ```javascript // 获取名为"BoardList"的iframe中的元素 parent.frames["BoardList"]....
为了解决这个问题，可以通过JavaScript进行DOM动态操作来实现`iframe`的高度自适应。 #### 关键技术点 1. **DOM操作**：DOM（Document Object Model）是HTML和XML文档的应用程序接口(API)。通过DOM，开发者可以...
- 可以通过`window.frames['iframeName'].document`或`document.getElementById('iframeId').contentDocument`来访问iframe内的文档对象。 #### 实现方法详解 1. **访问iframe内容的基本步骤**： 1. **定位...
iframe.document出现拒绝访问。 threw an exception of type 'System.UnauthorizedAccessException' dynamic {System.UnauthorizedAccessException}
请注意，由于同源策略的限制，如果iframe加载的页面与父页面不在同一域名下，那么一些跨域安全策略会阻止直接访问iframe的DOM。在这种情况下，可以使用`window.postMessage` API来进行跨域通信。 总结一下，js-...
在JavaScript中，可以使用`iframe.contentDocument`访问iframe的DOM，从而修改其内容，包括添加页眉和页脚元素。例如： ```javascript var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; ...
当iframe加载完成并且其内容高度已知时，可以使用`contentWindow`和`contentDocument`属性来访问iframe的DOM对象，然后通过CSS样式获取高度。例如： ```javascript var iframe = document.getElementById('...
接下来，我们可以利用JavaScript的DOM操作和事件监听来实现自适应高度的功能。以下是一个基本的实现步骤： 1. **获取`iframe`元素**：通过`document.getElementById`或`querySelector`方法找到页面上的`iframe`元素...
### iframe框架与JavaScript获取iframe元素详解 #### 一、引言 `iframe`是非标准HTML标签，最初由Internet Explorer浏览器引入并推广，随后被Mozilla等其他浏览器所支持。`iframe`的主要用途是在当前网页中嵌入另一...
在跨域操作iframe时，有时我们需要从父页面访问iframe内部的内容。此时，我们可以结合使用parent.document属性来访问父页面的document对象，再使用find()方法定位到iframe元素，之后可以再次使用contents()方法来...
1. **跨域限制**：由于同源策略，如果`iframe`的内容来源于不同的域名，那么默认情况下JavaScript无法访问`iframe`的内容，除非`iframe`的源支持`CORS`（跨源资源共享）。 2. **窗口和框架的引用**：在同源情况下，...
- 父页面访问子页面的DOM，可以通过`contentDocument`属性获取iframe内的`document`对象。例如，在A.html中访问B.html的DOM，代码如下： ```javascript var bIFrameDoc = document.getElementById('bIframe')....
而`contentDocument`则可以访问iframe内的DOM文档，允许你操作其中的HTML元素。 4. **跨域问题**：需要注意的是，由于同源策略限制，如果iframe加载的页面与包含它的页面不在同一域名下，大部分JavaScript操作会被...
本文将深入探讨`iframe`与主框架如何进行同域和跨域访问，并提供相关的解决方案。 同域访问： 在同域环境下，即`iframe`的源URL与包含它的页面URL具有相同的协议、主机名和端口，`iframe`与主框架之间的通信是无...