一个跳转页面的传参

最新推荐文章于 2023-12-10 08:53:25 发布

左之右

最新推荐文章于 2023-12-10 08:53:25 发布

阅读量718

点赞数

本文链接：https://blog.csdn.net/zuozhiyoulaisam/article/details/50736742

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

2个页面

1.HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<img src="12.jpg" alt="" height="100px" width="100px" id="myimg"/>
<table>
    <tr>
        <td>标题:</td>
        <td>
            <input type="text" name="title" id="title"/>
        </td>
    </tr>
    <tr>
        <td>内容:</td>
        <td>
            <input type="text" name="content" id="content"/>
        </td>
    </tr>
    <tr>
        <td> <button οnclick="sendInfo()">提交</button></td>
    </tr>
</table>
</body>
    <script>
        function sendInfo(){
            var title=document.getElementById("title").value;
            var content=getById("content").value;
            var src=getById("myimg").getAttribute("src");
            debugger;
            window.location = "2.html?title="+title+"&content="+content+"&src="+src;
        }
        function getById(id){
            return  document.getElementById(id)
        }
    </script>
</html>

2.HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片页</title>
</head>
<body>
<img  alt="" id="targetImg"  height="100px" width="100px"/>
<input type="text" id="title" name="title" />
<input type="text" id="content" name="content"/>

</body>
<script>
    //页面初始化的时候
    window.οnlοad=function(){
        //获取的是链接的数据
        var urlcontent=location.href;
        debugger;
        //从超链接获取的对象内容值
        var myobj=doMyContent(urlcontent);
        debugger;
        //判断url是否有链接的判断，有则赋值，无则跳过
        if(urlcontent.indexOf("?")>-1){
            getById("title").value=myobj.title;
            getById("content").value=myobj.content;
            getById("targetImg").setAttribute("src",myobj.src);
        }
    }

    //处理你的超链接的内容
    function doMyContent(urlcontent){
        var obj={};
        var target=urlcontent.split("?");
        //我们传过来的参数
        var param=target[1];
        //解决超链接的中午的乱码的问题
        var realcontent=decodeURI(param);
        //分解出你每个参数的key 与 value值
        var arr=realcontent.split("&");
        for(var i=0;i<arr.length;i++){
            var content=arr[i].split("=");
            obj[content[0]]=content[1];
        }
        debugger;
        return obj;
    }

    function getById(id){
        return  document.getElementById(id)
    }

</script>
</html>