.js 文件怎样接受html 传递的参数,html 怎样传递参数给.js文件

html-css06

.js 文件怎样接受html 传递的参数,html 怎样传递参数给.js文件,第1张

1、首先创建一个文件夹,这个文件夹有一个js文件夹和一个html文件。js文件夹用来存放需要引入的js文件。

2、打开html文件,在html文件上找到<body>,在<body>标签里创建一个按钮标签,然后给这个标签添加一个点击addJs事件。

3、在js文件夹下创建一个js文件为addJs.js。

4、在addJs.js文件上输入一个alert弹出框并保存,当引入js文件成功就会执行alert弹出框。

5、回到html文件,在按钮输入框后面创建一个script标签,然后添加用来引入addJs.js文件的addJs事件。

6、保存html文件后使用浏览器打开,点击按钮即可看到出现一个弹出,表示引入js文件成功。

第一个页面:

mobile.html?title=encodeURIComponent(手机APP制作)&src=encodeURIComponent(images/App.jpg)

第二个页面:

在body的onload中处理

document.getElementById(divs)

document.getElementById(imgs)

以下函数可以取出穿过来的参数,如:GetQueryString("title"),其中用到了decodeURIComponent,和传参时的处理对应

function GetQueryString(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")

var r = window.location.search.substr(1).match(reg)

if (r != null) return decodeURIComponent(r[2])return null

}

实例如下:

<html>

<head>

<title>第一个页面</title>

</head>

<body>

<ul id="idUl">

</ul>

<script type="text/javascript">

var li = document.createElement("li")

li.innerHTML = "<a href='second.html?title=" + encodeURIComponent("手机APP制作") + "&src=" + encodeURIComponent("images/App.jpg") + "'>手机App制作</a>"

document.getElementById("idUl").appendChild(li)

</script>

</body>

</html>

<html>

<head>

<title>第二个页面</title>

<script lang="javascript" type="text/javascript">

function GetQueryString(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")

var r = window.location.search.substr(1).match(reg)

if (r != null) return decodeURIComponent(r[2])return null

}

function showContent() {

document.getElementById("divs").innerHTML = GetQueryString("title")

document.getElementById("imgs").src = GetQueryString("src")

}

</script>

<head>

<body onload="showContent()">

<div id="divs"></div>

<img id="imgs" src="" />

</body>

</html>

方法和详细的操作步骤如下:

1、第一步,创建文件夹,此文件夹包含一个js文件夹和一个html文件。 js文件夹用于存储需要导入的js文件,见下图,转到下面的步骤。

2、第二步,执行完上面的操作之后,打开html文件,在html文件上找到<body>,在<body>标记中创建按钮标签,然后向该标签添加click addJs事件,见下图,转到下面的步骤。

3、第三步,执行完上面的操作之后,在js文件夹中创建一个js文件,名称为addJs.js,见下图,转到下面的步骤。

4、第四步,执行完上面的操作之后,在addJs.js文件中输入一个警报弹出框并保存。 成功导入js文件后,将执行警报弹出框,见下图,转到下面的步骤。

5、第五步,执行完上面的操作之后,返回html文件,在按钮输入框后面创建一个脚本标签,然后添加用于引入addJs.js文件的addJs事件,见下图,转到下面的步骤。

6、第六步,执行完上面的操作之后,保存html文件,使用浏览器将其打开,然后单击按钮以查看弹出窗口,表明js文件已成功引入,见下图。这样,以上的问题就解决了。