基本的操作方法：
document.frames("frame_id").document.action;
其中，frame_id是该父页面需要进行操作的iframe的id，action是iframe中的相关操作。
从该方法中，可以看出 document.frames("frame_id")是用来从父页面中获取iframe的id的，而后面的document.action同一般的脚本对页面元素操作一样，具体举个例子来说明一下,其中父页面引用iframe部分如下：
父页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function iframe_test(){
if(document.frames("test_iframe").document.getElementById("username").value==""){
alert("请输入用户名!");
}
if(document.frames("test_iframe").document.getElementById("descript").value==""){
document.frames("test_iframe").document.getElementById("descript").value="descript";
}
}
</script>
</head>
<body>
<iframe onload="iframe_test()" frameborder="0" scrolling="no" name="test_iframe" src="Untitled-2.html" width="100%" height="100%">
</iframe>
</body>
</html>
子页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="text" id="username" /><br />
<input type="text" id="descript" /><br />
<input type="button" value="提交" />
</body>
</html>
此例描述了在父页面中读取iframe中元素以及在父页面中修改iframe中元素的属性。
通过此例，我们可以看出，在父页面中访问iframe中的各个元素与一般的访问页面元素无本质区别，无非是需要在父页面中事先获取需要处理的iframe对象，在获取iframe对象后，其操作基本没什么特别之处。
分享到：
相关推荐
在网页开发中，有时我们需要在不同的页面或者框架之间进行交互，比如子页面操作父页面的数据，或者在一个iframe中访问另一个iframe中的内容。这种情况在实际应用中很常见，尤其是在构建复杂Web应用时。以下是对"子...
父页面可以直接访问iframe中的window对象来调用其中的方法和属性，同样iframe也可以通过访问parent对象来调用父页面的方法和属性。例如，父页面可以使用“myFrame.window.childMethod();”来调用iframe中的方法，而...
操作Iframe中的元素 获取了Iframe窗口对象后，就可以像操作普通页面一样操作Iframe内的元素了。例如，隐藏或显示某个元素： ```javascript // 隐藏指定ID的元素 var ifr_window = window.frames["frameName"]; ...
当一个页面设置`window.name`，然后在另一个页面的iframe中加载这个页面，就可以读取到之前设置的值。 3. **修改`document.domain`**：如果父页面和子页面的顶级域名相同，但子域名不同，可以尝试设置`document....
利用JavaScript可以实现对`iframe`中的元素进行操作，例如读取或修改其中的内容。下面将详细介绍如何通过JavaScript来处理`iframe`中的各种问题。 #### 1. 访问`iframe`内部元素 根据提供的代码片段，“获取父页面...
当一个页面试图通过IFrame加载不同源的网页时，由于同源策略的存在，我们不能直接获取或操作IFrame中的内容。 面对这样的问题，我们可以采用以下几种跨域解决方案： 1. **CORS（Cross-Origin Resource Sharing）**...
5. **Web消息API（Web Messaging API）**：如果B页面是在新的窗口或iframe中打开，可以使用`postMessage`和`message`事件进行跨窗口通信。B页面发送消息，A页面监听并接收。 6. **Ajax请求**：B页面可以发送一个...
在探讨“嵌入到HTML的iframe自动适应大小”的主题时，我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度，从而实现良好的响应式设计和用户体验。...
数据在父子页面间的传递，可以帮助我们实现更复杂的交互逻辑，如在子页面完成某些操作后，将结果反馈给父页面，或者在父页面中设置初始数据，供子页面使用。 常见的数据传递方法有以下几种： 1. URL参数传递：通过...
但是，当涉及到在包含页面（父页面）和子页面（iframe中的页面）之间进行通信时，就涉及到如何在iframe之间传递数据的问题。以下是关于如何在JavaScript中的iframe之间进行数据传递的详细知识点。 ### 1. 在iframe...
一种常见的方法是在父页面中监听`iframe`的`load`事件，然后通过`contentWindow`属性获取到`iframe`内部的`window`对象，并通过`document`对象获取内容区域的高度。以下是一个简单的示例： ```javascript document....
如果iframe和父页面同源（即协议、域名和端口相同），那么可以使用JavaScript的`contentWindow`属性获取iframe的`window`对象，进一步操作iframe中的DOM；而`contentDocument`属性则可以获取到iframe的`document`...
因此，当操作iframe中的元素时，需要确保我们插入的内容是安全的，避免用户数据被恶意脚本读取。 5. 使用jQuery的API： jQuery是一个非常强大的JavaScript库，提供了一套丰富的API，可以用来简化HTML文档遍历、...
浏览器的同源策略（Same-Origin Policy）是为保障用户安全而设定的一种机制，它规定了只有相同协议、主机名和端口的网页才能相互交互，不同源的页面则无法直接进行DOM操作或读取对方的资源。然而，有时我们需要在不...
创建自定义DOM事件并将其从一个`iframe`派发到另一个`iframe`，但这种方式通常需要两者之间有共同的父窗口。 二、`iframe`间的JavaScript调用 1. **通过`contentWindow`属性：** 每个`iframe`都有一个`...
1. **设置和读取DOM元素的值**：父页面可以通过`iframeDocument`访问到`iframe`内的DOM元素，进而设置或读取其值。 ```javascript // 设置iframe内某个元素的值 iframeDocument.find('#childElement').val('新值...
而当iframe加载的页面与包含它的页面不在同一源时，JavaScript无法直接读取或操作iframe中的内容，反之亦然。 为了解决这个问题，开发者可以利用以下几种方法： 1. **CORS（Cross-Origin Resource Sharing）**：...
但同时，它也引入了父页面与iframe之间进行数据交换的需求，也就是所谓的“传值传参”。随着浏览器技术的发展，不同浏览器间的兼容性问题成为开发者需要考虑的重要方面。特别是早期的浏览器，如Internet Explorer和...