前言:
在实际开发过程中:会使用iframe嵌套其他页面,并且会有参数传递,以下为完成例子
(本人项目案例:通过子页面事件触发,改变父页面的页面状态)
父页面:a.html
<!DOCTYPE html>
<html>
<head>
<title>父页面</title>
</head>
<body>
<div class="parent">
<iframe src="./b.html"></iframe>
</div>
</body>
<script type="text/javascript">
// 接收子页面参数
window.addEventListener('message', function(result){
// 审批返回数据,页面调条数
var data = JSON.parse(result.data);
// 弹出框-展示子页面传过来的参数
alert(data.value);
})
</script>
</html>
子页面:b.html
<!DOCTYPE html>
<html>
<head>
<title>子页面</title>
</head>
<body>
<div class="children" onclick="toParent()">子页面按钮:传参给父页面</div>
</body>
<style type="text/css">
.children{
background-color: #1ab394;
cursor: pointer;
}
</style>
<script type="text/javascript">
/**
* 触发事件,传参给父页面
*/
function toParent() {
// 自定义对象
var obj = {
value: '我是子页面传过来的参数'
};
// 传参给父页面
window.parent.postMessage(JSON.stringify(obj),'*');
}
</script>
</html>
JavaScript是一种广泛使用的编程语言,主要用于网页开发。
JavaScript的基本概念:
- 变量和数据类型:在JavaScript中,你可以使用变量来存储各种数据,如数字、字符串、布尔值、对象、数组等。JavaScript是一种弱类型语言,这意味着变量的类型可以在运行时改变。
- 函数:函数是一段可重复使用的代码块,可以接受参数并返回一个值。在JavaScript中,函数可以作为一等公民,可以作为参数传递给其他函数,也可以作为变量存储。
- 对象:对象是包含属性和方法的集合。属性是变量,方法则是函数。在JavaScript中,对象是使用花括号{}来创建的。
- 事件:事件是用户与网页交互时发生的事情,如点击、鼠标移动、键盘输入等。JavaScript允许你定义事件处理程序,以便在事件发生时执行特定的代码。
- DOM(文档对象模型):DOM是HTML和XML文档的编程接口,它提供了一种方式来访问和操作文档的结构。在JavaScript中,你可以使用DOM来动态地修改网页内容、结构和样式。
- 异步编程:JavaScript是单线程的,这意味着它一次只能执行一个任务。为了提高性能并允许用户与网页交互,JavaScript使用异步编程模型,如回调函数、Promises和async/await。
- 模块和模块化:在现代JavaScript开发中,模块是一种组织代码的方式。通过模块化,你可以将代码分解为独立的文件,每个文件都有一个特定的功能或任务。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:HTML 定义了网页的内容,CSS 描述了网页的布局,JavaScript 控制了网页的行为。
后记
HTML(超文本标记语言)和CSS(级联样式表)是web开发中使用的两种基本技术。它们协同工作来构建和设计网页样式。
HTML用于创建网页的结构和内容。它由一系列元素组成,如标题、段落、图像、链接和列表等。这些元素由包含在尖括号中的标记定义。例如,要创建标题,可以使用h1标记;要创建段落,可以使用p标记。
CSS用于对HTML元素进行样式和布局。它允许您控制元素的外观,包括它们的颜色、字体、大小、边距和位置。CSS的工作原理是选择特定的HTML元素并对其应用样式。可以使用选择器来定义样式,例如元素选择器(选择特定HTML元素的所有实例)或类选择器(选择具有特定类属性的元素)。
HTML和CSS通过将HTML文件链接到CSS文件来协同工作。HTML文件包含网页的结构和内容,而CSS文件包含要应用于该结构和内容的样式。CSS文件可以使用HTML的<head>部分中的<link>标记链接到HTML文件。
相关文章
【温故而知新】Canvas详解及常见问题
html/css实现简易圣诞贺卡
【温故而知新】CSS预编语言
【温故而知新】CSS提高性能的方法都有那些
CSS的Grid布局与Flex布局