discuz开发应用中js函数在frame中的相互调用详解

admin · 发表于 2020-11-1 16:50:45

马上注册，免费下载更多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'">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)">加入购物车</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开发中，框架（Frame）的使用可以帮助你将页面划分为多个独立的功能模块，每个模块可以独立运行，同时通过JavaScript实现模块之间的交互。以下是一些关于如何在Discuz中使用JavaScript实现框架间相互调用的详细说明。

### 1. 父框架到子框架的引用
在Discuz中，如果你有一个父框架和多个子框架，你可以通过`window.frames`来引用子框架。假设你有一个子框架的`name`属性为`frameName`，你可以通过以下方式引用它：

window.frames['frameName'];

复制代码

如果你需要引用子框架中的子框架，可以继续链式调用：

window.frames['frameName'].frames['subFrameName'];

复制代码

### 2. 子框架到父框架的引用
每个子框架都有一个`parent`属性，指向它的父框架。如果子框架本身是顶层框架，`parent`属性指向它自己。你可以通过以下方式在子框架中引用父框架：

window.parent;

复制代码

### 3. 兄弟框架间的引用
如果两个框架是同一个父框架的子框架，它们可以通过父框架来互相引用。假设你有两个子框架`frame1`和`frame2`，你可以在`frame1`中引用`frame2`：

window.parent.frames['frame2'];

复制代码

### 4. 不同层次框架间的互相引用
如果框架的层次不同，你可以通过`parent`和`frames`属性来引用不同层次的框架。例如，假设你有一个三级框架结构，你可以在第一级框架中引用第三级框架：

window.parent.frames['secondFrame'].frames['thirdFrame'];

复制代码

### 5. 对顶层框架的引用
你可以使用`top`属性来引用顶层框架。这在判断当前框架是否为顶层框架时非常有用：

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

复制代码

### 6. 改变框架的载入页面
你可以通过改变框架的`location`属性来动态加载不同的页面。例如，如果你想在某个框架中加载一个新的页面，可以这样做：

window.frames['frameName'].location.href = 'newpage.html';

复制代码

### 7. 引用其他框架内的JavaScript变量和函数
在Discuz中，你可以通过`window`对象来引用其他框架中的JavaScript变量和函数。假设你在一个框架中定义了一个全局变量或函数，你可以在另一个框架中通过`window`对象来访问它。

例如，假设你在`frame1`中定义了一个全局函数`hello()`：

function hello() {
alert('Hello, Discuz!');
}

复制代码

你可以在`frame2`中调用这个函数：

window.parent.frames['frame1'].hello();

复制代码

### 8. 实际应用示例
假设你有一个Discuz页面，左侧是导航框架，右侧是内容框架。你希望在点击左侧导航链接时，右侧内容框架加载相应的页面。你可以这样做：

<iframe name="leftFrame" src="left.html"></iframe>
<iframe name="rightFrame" src="right.html"></iframe>

复制代码

在`left.html`中，你可以定义一个函数来改变右侧框架的内容：

function loadContent(url) {
window.parent.frames['rightFrame'].location.href = url;
}

复制代码

然后在导航链接中调用这个函数：

<a href="javascript:loadContent('page1.html');">Page 1</a>
<a href="javascript:loadContent('page2.html');">Page 2</a>

复制代码

### 总结
在Discuz开发中，框架的使用可以帮助你将页面划分为多个独立的功能模块，并通过JavaScript实现模块之间的交互。通过`window.frames`、`window.parent`、`window.top`等属性，你可以轻松地在不同框架之间进行引用和操作。希望这些内容能帮助你更好地理解和使用Discuz中的框架编程。

如果你有更多关于Discuz开发的问题，欢迎随时提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 5 天前

在Discuz开发中，涉及到框架（frame）之间的JavaScript函数调用时，理解框架之间的引用关系是非常重要的。以下是一些关键点和示例代码，帮助你在Discuz开发中实现框架间的JavaScript函数调用。

### 1. 父框架到子框架的引用
在父框架中引用子框架的JavaScript函数或变量，可以通过`window.frames`或`window.frames["frameName"]`来实现。

// 引用名为frameName的子框架
var childFrame = window.frames["frameName"];
// 调用子框架中的函数
childFrame.someFunction();
// 访问子框架中的变量
var someVar = childFrame.someVariable;

复制代码

### 2. 子框架到父框架的引用
在子框架中引用父框架的JavaScript函数或变量，可以通过`window.parent`来实现。

// 引用父框架
var parentFrame = window.parent;
// 调用父框架中的函数
parentFrame.someFunction();
// 访问父框架中的变量
var someVar = parentFrame.someVariable;

复制代码

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

// 引用兄弟框架frame2
var siblingFrame = window.parent.frames["frame2"];
// 调用兄弟框架中的函数
siblingFrame.someFunction();
// 访问兄弟框架中的变量
var someVar = siblingFrame.someVariable;

复制代码

### 4. 不同层次框架间的互相引用
如果框架的层次不同，可以通过`parent`和`frames`属性来逐层引用。

// 引用二级子框架
var secondLevelFrame = window.parent.frames["frameName"].frames["secondFrameName"];
// 调用二级子框架中的函数
secondLevelFrame.someFunction();
// 访问二级子框架中的变量
var someVar = secondLevelFrame.someVariable;

复制代码

### 5. 对顶层框架的引用
使用`window.top`可以引用到最顶层的框架。

// 引用顶层框架
var topFrame = window.top;
// 调用顶层框架中的函数
topFrame.someFunction();
// 访问顶层框架中的变量
var someVar = topFrame.someVariable;

复制代码

### 6. 改变框架的载入页面
通过`window.location`属性可以改变框架的载入页面。

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

复制代码

### 7. 引用其他框架内的JavaScript变量和函数
在框架之间共享变量和函数时，可以通过`window`对象来调用。

// 在子框架中定义全局变量和函数
window.someVariable = "Hello, World!";
window.someFunction = function() {
alert("Hello from child frame!");
};
// 在父框架中调用子框架的函数
window.frames["frameName"].someFunction();
// 在父框架中访问子框架的变量
var someVar = window.frames["frameName"].someVariable;

复制代码

### 示例：购物车功能
假设你有一个左侧导航框架和一个右侧商品展示框架，你可以在左侧框架中定义一个数组来存储用户选择的商品ID，并在右侧框架中调用左侧框架的函数来更新购物车。

**左侧框架（link.html）:**

<script>
var arrOrders = [];
function addToOrders(id) {
arrOrders.push(id);
alert("商品 " + id + " 已加入购物车");
}
</script>

复制代码

**右侧框架（show.html）:**

<a href="javascript:void(0);" onclick="parent.frames['link'].addToOrders(32068);">加入购物车</a>

复制代码

在这个例子中，当用户点击“加入购物车”链接时，右侧框架会调用左侧框架中的`addToOrders`函数，将商品ID添加到购物车数组中。

### 总结
在Discuz开发中，框架间的JavaScript函数调用可以通过`window.frames`、`window.parent`、`window.top`等属性来实现。理解这些引用关系可以帮助你在复杂的页面结构中实现功能模块的交互。希望这些内容对你有所帮助！如果你有更多问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。