今天，一群友问到跨frame操作dom元素的问题。于是写了个demo，在此发表在博客里面，供其他同道中人参考！
创建child.html内容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030" />
<title>每次点击按钮之后重新在浏览器地址栏回车</title>
<script type="text/javascript">
function setParentVal2Child_02(){
var txt = window.parent.document.getElementById("parent_01").value;
document.getElementById("child_01").value=txt;
}
function setChildVal2Parent_02(){
var txt = document.getElementById("child_02").value;
window.parent.document.getElementById("parent_02").value=txt;
}
</script>
</head>
<body style="background-color:red">
<input type="button" value="setParentVal2Child" onclick="setParentVal2Child_02()">
<input type="button" value="setChildVal2Parent" onclick="setChildVal2Parent_02()">
<p></p>
childVal_01:<input type="text" value="CCCC" id="child_01">
childVal_02:<input type="text" value="DDDD" id="child_02">
</body>
</html>
创建index.html，内容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030" />
<title>每次点击按钮之后重新在浏览器地址栏回车</title>
<script type="text/javascript">
function setParentVal2Child_01(){
var txt=document.getElementById("parent_01").value;
window.frames['child'].document.getElementById("child_01").value=txt;
}
function setChildVal2Parent_01(){
var txt=window.frames['child'].document.getElementById("child_02").value;
document.getElementById("parent_02").value=txt;
}
</script>
</head>
<body>
<input type="button" value="setParentVal2Child" onclick="setParentVal2Child_01()">
<input type="button" value="setChildVal2Parent" onclick="setChildVal2Parent_01()">
<p></p>
parentVal_01:<input type="text" value="AAAA" id="parent_01">
parentVal_02:<input type="text" value="BBBB" id="parent_02">
<p></p>
<iframe src="child.html" width="800" height="300" frameborder="1" name="child"></iframe>
</body>
</html>
预览效果！如图：
布局说明：红色部分为子frame。
功能说明：
点击"setParentVal2Child"按钮会把父frame里面的parentVal_01的值赋给childVal_01。
点击"setChildVal2Parent"按钮会把子frame里面的childVal_02的值赋给parentVal_02。
友情提示：
1.分别实现了在父frame和子frame里面进行子和父的传值操作！
2.window.parent获取直接父窗体，window.top获取顶级父窗体
3.源码见附件
分享到：
相关推荐
在网页设计中，"跨Frame下拉菜单"是一种常见的交互元素，它允许用户在一个框架（frame）中的下拉菜单选择，而操作或效果会在另一个框架中显示。这种设计模式常用于构建多窗口或多面板的网页布局，提高用户体验，使...
需要注意的是，使用jQuery操作iframe中的DOM时，必须确保iframe已经完全加载完毕，否则可能无法正确获取其内部的DOM元素。为了处理这种情况，通常我们会将相关操作放在iframe的“load”事件中或者在window的“load”...
3. **权限管理**：由于跨frame操作涉及到安全问题，浏览器会阻止默认的跨frame拖放行为。开发者需要在目标frame中使用`allow`属性或者通过JavaScript设置`window.frames`的权限，允许来自特定源的拖放事件。 4. **...
这在跨框架通信时非常有用，比如当需要从一个`frame`操作另一个`frame`的内容时。例如，如果我们想要从`leftFrame`获取`rightFrame`的内容，可以这样做： ```javascript var rightFrame = window.parent.document....
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在操作DOM（文档对象模型）方面具有强大的功能。当涉及到在iframe中操作DOM时，情况会变得稍微复杂一些，因为iframe实际上是一个独立的浏览上下文...
3. **操作框架内容**：获取到框架引用后，你可以像操作普通DOM元素一样，使用`appendChild()`在框架的文档上下文中添加元素。例如，假设你要在`frame1`中添加一个新的`div`元素，代码可能如下： ```javascript ...
对于`iframe`或`frame`，如果父页面和子页面不在同一个源下，那么默认情况下JavaScript无法访问或修改彼此的DOM元素。这为跨域通信带来了挑战。 2. 跨域通信：为了克服同源策略的限制，开发者可以利用`window.post...
通过`frame`对象，可以访问和操作框架内的内容，比如改变其加载的URL、获取或修改DOM元素等。 4. **Window对象、Parent对象、Frame对象的关系**： 这些对象构成了一个层级结构，Window对象是顶级的，它包含了所有...
操作DOM元素是实现联动的核心技术。通过javascript取得DOM元素的引用，并对这些元素进行添加、删除、修改等操作，从而实现下拉选项的动态更新。例如，使用document.getElementById()方法获取select元素，使用...
在前端开发中，JavaScript和DOM操作是核心组成部分，而...通过上述的知识点梳理，前端开发者可以在进行跨浏览器的JavaScript和DOM操作时，避免一些常见的兼容性问题，并采取相应的解决策略来提高代码的兼容性和稳定性。
在JavaScript中，对`iframe`内的DOM元素进行操作是一项常见的任务，特别是在构建复杂网页和应用时。本实例讲解了如何通过JavaScript直接操作`iframe`内部的DOM结构，以实现跨文档通信和页面间的交互。 首先，我们...
在JavaScript编程中，...通过深入理解源码，我们可以学习到如何在受限的环境中有效地操作DOM，以及如何处理跨框架的通信和定位问题。这对于我们提升JavaScript编程技能，尤其是处理前端交互问题，具有很高的参考价值。
3. **HTMLFrame与数据交互**：将服务器返回的数据插入到HTMLFrame中，可能需要使用JavaScript操作DOM。 4. **监听HTMLFrame事件**：绑定事件监听器，如`onload`事件，以便在HTMLFrame内容加载完成后执行某些操作。 5...
`jquery.js`是基础的jQuery库，用于简化DOM操作和事件处理。`draggable.js`可能是一个自定义的插件，扩展了jQuery UI的拖放功能，以适应跨iframe的需求。 实现跨iframe拖放的基本步骤如下： 1. 在主页面（可能是`...
JSFrame-PC包含了一些DOM操作的函数，比如选择元素、添加或删除元素、修改元素属性等，这些功能有助于开发者更加灵活地操控页面结构。 4. **模块化**： 考虑到代码的组织和重用，JSFrame-PC可能采用了模块化设计，...
- **bindings**：这部分将DOM（文档对象模型）绑定到JavaScriptCore，使得JavaScript可以操作DOM元素。同时，它包含了IDL（接口定义语言）文件，用于自动生成JavaScriptCore的绑定实现。 - **bridge**：涉及到...
1. **DOM操作**：使用JavaScript操作HTML文档对象模型（DOM），动态创建和修改日历的HTML结构，包括表格、单元格等元素。 2. **事件处理**：绑定点击事件到触发日历显示的按钮或输入框，当用户点击时，弹出日历窗口...
在网页开发中，有时我们需要对嵌入的`iframe`（Inline Frame）中的内容进行操作，例如修改DOM元素、触发事件等。为了实现这样的功能，我们需要首先获取到`iframe`的`document`对象，因为`document`对象是HTML文档的...
在网页开发中，有时我们需要对页面中的`frames`或`iframe`进行操作，例如与主页面或其他框架页面之间通信，实现...同时，它也展示了如何结合使用jQuery的选择器、动画效果和Ajax功能，来实现跨frame的JavaScript交互。