js函数在frame中的相互调用详解

IT618发布 · 发表于 2020-7-7 09:56:20

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

一个HTML页面可以有一个或多个子框架，这些子框架以<iframe>来标记，用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等

框架间的互相引用

一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的属性。因此，要引用一个子框架，可以使用如下语法：

代码如下:
window.frames["frameName"];
window.frames.frameName
window.frames[index]

其中，window字样也可以用self代替或省略，假设frameName为页面中第一个框架，则以下的写法是等价的：

代码如下:
self.frames["frameName"]
self.frames[0]
frames[0]
frameName

每个框架都对应一个HTML页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。有了这个window对象，就可以很方便地对其中的页面进行操作，例如使用window.document对象向页面写入数据、使用 window.location属性来改变框架内的页面等。
下面分别介绍不同层次框架间的互相引用：

1．父框架到子框架的引用
知道了上述原理，从父框架引用子框架变的非常容易，即：

代码如下:
window.frames["frameName"];

这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：

代码如下:
window.frames["frameName"].frames["frameName2"];

这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。

2．子框架到父框架的引用
每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。

3．兄弟框架间的引用
如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架：

代码如下:
<frameset rows="50%,50%">
   <frame src="1.html" name="frame1" />
   <frame src="2.html" name="frame2" />
</frameset>

在frame1中可以使用如下语句来引用frame2：

代码如下:
self.parent.frames["frame2"];

4．不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：

代码如下:
self.parent.frames["childName"].frames["targetFrameName"];

5．对顶层框架的引用
和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：

代码如下:
//判断本框架是否为顶层框架
if(self==top){
   //dosomething
}

改变框架的载入页面
对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如：
window.frames[0].location="1.html";
这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架。

代码如下:
<frameset rows="50%,50%">
   <frame src="1.html" name="frame1" />
   <frame src="2.html" name="frame2" />
</frameset>

<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a>


引用其他框架内的JavaScript变量和函数
在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码：

代码如下:
<script language="JavaScript" type="text/javascript">

</script>

如果运行了这段代码，会弹出“hello,ajax!”的窗口，这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢？因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如：

代码如下:
var a=1;
alert(window.a);

就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。
例如：一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。
在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的JavaScript变量不会丢失，可以用来存储全局数据。其实现原理如下：
假设左侧页面为link.html，右侧页面为show.html，页面结构如下：

代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<frameset cols="20%,80%">
   <frame src="link.html" name="link" />
   <frame src="show.html" name="show" />
</frameset>
</html>

在show.html中展示的商品旁边可以加入这样一条语句：
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">加入购物车</a>
其中link表示导航框架，在link.html页面中定义了arrOrders数组来存储商品的id，函数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id表示商品的id，例子中是一个id为32068的商品：

代码如下:
<script language="JavaScript" type="text/javascript">

</script>

这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。
框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 5 天前

在Discuz!开发中，框架的使用和JavaScript的相互调用是一个常见的需求，尤其是在需要实现复杂的页面交互时。以下是如何在Discuz!中实现框架间JavaScript函数调用的详细解释。

### 1. 框架间的互相引用

在Discuz!中，如果你使用了框架（frameset或iframe），你可以通过`window.frames`来访问页面中的所有框架。每个框架都是一个独立的`window`对象，因此你可以通过这个对象来访问和操作框架内的内容。

#### 父框架到子框架的引用

假设你有一个父框架和两个子框架，子框架的`name`分别为`frame1`和`frame2`。你可以通过以下方式在父框架中引用子框架：

// 引用名为frame1的子框架
var frame1 = window.frames['frame1'];
// 引用名为frame2的子框架
var frame2 = window.frames['frame2'];

复制代码

#### 子框架到父框架的引用

在子框架中，你可以通过`parent`属性来引用父框架：

// 在子框架中引用父框架
var parentFrame = window.parent;

复制代码

#### 兄弟框架间的引用

如果两个框架是兄弟框架（即它们有相同的父框架），你可以通过父框架来引用另一个兄弟框架：

// 在frame1中引用frame2
var frame2 = window.parent.frames['frame2'];

复制代码

#### 不同层次框架间的互相引用

如果框架的层次不同，你可以通过`parent`和`frames`属性来逐层引用：

// 在frame1中引用frame2的子框架frame2_1
var frame2_1 = window.parent.frames['frame2'].frames['frame2_1'];

复制代码

#### 对顶层框架的引用

你可以使用`top`属性来引用顶层框架：

// 判断当前框架是否为顶层框架
if (window === window.top) {
// 当前框架是顶层框架
}

复制代码

### 2. 改变框架的载入页面

你可以通过`window.location`属性来改变框架的载入页面：

// 将frame1的页面重定向到newpage.html
window.frames['frame1'].location.href = 'newpage.html';

复制代码

### 3. 引用其他框架内的JavaScript变量和函数

在Discuz!中，你可以通过`window`对象来引用其他框架内的JavaScript变量和函数。假设你在`frame1`中定义了一个全局变量和一个函数：

// 在frame1中定义全局变量和函数
var globalVar = 'Hello, Discuz!';
function showMessage() {
alert(globalVar);
}

复制代码

你可以在`frame2`中通过`window.parent.frames['frame1']`来引用`frame1`中的变量和函数：

// 在frame2中引用frame1中的变量和函数
var frame1 = window.parent.frames['frame1'];
alert(frame1.globalVar); // 输出: Hello, Discuz!
frame1.showMessage(); // 弹出: Hello, Discuz!

复制代码

### 4. 实际应用示例

假设你有一个Discuz!页面，左侧是导航栏（`nav.html`），右侧是内容展示区（`content.html`）。你希望在点击导航栏中的链接时，右侧内容区显示相应的内容。

#### nav.html

<!DOCTYPE html>
<html>
<head>
<title>导航栏</title>
<script>
function loadContent(page) {
// 引用右侧内容框架并加载页面
window.parent.frames['content'].location.href = page;
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:loadContent('page1.html')">页面1</a></li>
<li><a href="javascript:loadContent('page2.html')">页面2</a></li>
</ul>
</body>
</html>

复制代码

#### content.html

<!DOCTYPE html>
<html>
<head>
<title>内容展示区</title>
</head>
<body>
<h1>欢迎来到内容展示区</h1>
</body>
</html>

复制代码

#### 主页面

<!DOCTYPE html>
<html>
<head>
<title>主页面</title>
</head>
<frameset cols="20%,80%">
<frame src="nav.html" name="nav">
<frame src="content.html" name="content">
</frameset>
</html>

复制代码

在这个示例中，当用户点击导航栏中的链接时，`loadContent`函数会被调用，并通过`window.parent.frames['content']`引用右侧的内容框架，然后改变其`location.href`属性来加载新的页面。

### 总结

在Discuz!开发中，框架的使用和JavaScript的相互调用是非常常见的需求。通过`window.frames`、`parent`、`top`等属性，你可以轻松地在不同框架之间进行引用和操作。希望这些内容能帮助你更好地理解和应用框架编程技术。如果你有更多问题，欢迎继续提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 5 天前

在Discuz!开发中，框架（Frame）的使用虽然不如现代前端开发中常见，但在某些场景下仍然有其应用价值。以下是如何在Discuz!中使用JavaScript进行框架间相互调用的详细解释。

### 1. 框架间的互相引用

在Discuz!中，如果你使用了框架（如`<iframe>`），你可以通过JavaScript来引用和操作这些框架。以下是一些常见的引用方式：

#### 1.1 父框架到子框架的引用

假设你有一个父页面，其中包含一个子框架（`<iframe>`），你可以通过以下方式引用子框架：

// 引用名为frameName的子框架
var childFrame = window.frames['frameName'];

复制代码

如果你有多个子框架，可以通过索引来引用：

// 引用第一个子框架
var firstChildFrame = window.frames[0];

复制代码

#### 1.2 子框架到父框架的引用

在子框架中，你可以通过`parent`属性来引用父框架：

// 在子框架中引用父框架
var parentFrame = window.parent;

复制代码

#### 1.3 兄弟框架间的引用

如果两个框架是兄弟框架（即它们有同一个父框架），你可以通过父框架来引用另一个兄弟框架：

// 在frame1中引用frame2
var siblingFrame = window.parent.frames['frame2'];

复制代码

#### 1.4 不同层次框架间的互相引用

如果框架的层次较深，你可以通过逐级引用的方式来访问：

// 引用二级子框架
var secondLevelChildFrame = window.parent.frames['frameName'].frames['subFrameName'];

复制代码

#### 1.5 对顶层框架的引用

你可以使用`top`属性来引用顶层框架：

// 判断当前框架是否为顶层框架
if (window === window.top) {
// 当前框架是顶层框架
}

复制代码

### 2. 改变框架的载入页面

你可以通过改变框架的`location`属性来动态加载新的页面：

// 改变子框架的页面
window.frames['frameName'].location.href = 'newpage.html';

复制代码

### 3. 引用其他框架内的JavaScript变量和函数

在Discuz!中，如果你需要在不同框架之间共享变量或调用函数，可以通过`window`对象来实现。

#### 3.1 引用其他框架的变量

假设你在子框架中定义了一个全局变量：

// 在子框架中定义全局变量
var globalVar = 'Hello, Discuz!';

复制代码

你可以在父框架中引用这个变量：

// 在父框架中引用子框架的全局变量
var childVar = window.frames['frameName'].globalVar;
console.log(childVar); // 输出: Hello, Discuz!

复制代码

#### 3.2 调用其他框架的函数

假设你在子框架中定义了一个全局函数：

// 在子框架中定义全局函数
function sayHello() {
alert('Hello, Discuz!');
}

复制代码

你可以在父框架中调用这个函数：

// 在父框架中调用子框架的函数
window.frames['frameName'].sayHello();

复制代码

### 4. 实际应用示例

假设你有一个Discuz!页面，左侧是导航框架，右侧是内容框架。你希望在点击左侧导航链接时，右侧内容框架加载相应的页面。

#### 4.1 HTML结构

<!DOCTYPE html>
<html>
<head>
<title>Discuz! Frame Example</title>
</head>
<frameset cols="20%,80%">
<frame src="navigation.html" name="navigation">
<frame src="content.html" name="content">
</frameset>
</html>

复制代码

#### 4.2 导航框架（navigation.html）

<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<script>
function loadContent(page) {
// 改变右侧内容框架的页面
parent.frames['content'].location.href = page;
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:loadContent('page1.html')">Page 1</a></li>
<li><a href="javascript:loadContent('page2.html')">Page 2</a></li>
</ul>
</body>
</html>

复制代码

#### 4.3 内容框架（content.html）

<!DOCTYPE html>
<html>
<head>
<title>Content</title>
</head>
<body>
<h1>Welcome to Content Page</h1>
</body>
</html>

复制代码

在这个示例中，当用户点击左侧导航链接时，右侧内容框架会加载相应的页面。

### 5. 注意事项

- **跨域问题**：如果框架中的页面来自不同的域名，浏览器会阻止跨域访问。这种情况下，你需要确保所有框架页面都在同一个域名下，或者使用CORS（跨域资源共享）来解决跨域问题。
- **安全性**：在Discuz!中，确保框架的使用不会引入安全漏洞，特别是在处理用户输入时。

通过以上方法，你可以在Discuz!中灵活地使用框架，并实现框架间的相互调用和数据共享。如果你有更多关于Discuz!开发的问题，欢迎继续提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。