window.open()的用法及如何以post方式提交

最新推荐文章于 2023-11-08 14:49:02 发布

menghuanzhiming

最新推荐文章于 2023-11-08 14:49:02 发布

阅读量1.1w

点赞数

分类专栏： window open 文章标签： window open

window 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

open

1 篇文章 0 订阅

订阅专栏

一般window.open传参数都是用Get，方式..在url后面拼接参数；
但有时候并不适用，如：
1）不想被看到参数信息
2）参数过长，get有限制会被截断
3）可能有中文编码问题
所以需要用post方式；
原理：

open方法不能设置请求方式，一般网页的post都是通过form来实现的。
如果仅仅模拟form的提交方式，那么open方法里那种可设置窗体属性的参数又不能用。  
最后想办法整了这么一个两者结合的方式，将form的target设置成和open的name参数一样的值，
通过浏览器自动识别实现了将内容post到新窗口中

方式一（表单）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
    <script type="application/javascript">
        function submitForm() {
            window.open('', 'newWin', 'width=400,height=500,scrollbars=yes');
            //提交当前窗口的表单，并将响应内容通过target指向新的窗口newWin
            $("#form").submit();
        }
        $(function(){
            $("#open").click(submitForm);
        });
    </script>

    <body>
        <!-- 
            action="img/a.png"等为静态资源请求，请求方式只能是get请求，否则会报错
            其他请求只要支持post请求便可以使用post请求
        -->
        <form id="form" action="img/a.png" method="get" target="newWin">
            姓名：<input type="text" name="name"/>
            <input type="button" name="提交" id="open"/>
        </form>
    </body>

</html>

方式二（临时表单）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="application/javascript">
        function openPostWindow(url, data, name){
            var tempForm = document.createElement("form");
            tempForm.id = "tempForm1";
            tempForm.method = "get";
            //url  
            tempForm.action = url;
            /*
             * open方法不能设置请求方式，一般网页的post都是通过form来实现的。
             * 如果仅仅模拟form的提交方式，那么open方法里那种可设置窗体属性的参数又不能用。  
             * 最后想办法整了这么一个两者结合的方式，将form的target设置成和open的name参数一样的值，通过浏览器自动识别实现了将内容post到新窗口中  
             */
            tempForm.target = name;

            var hideInput = document.createElement("input");
            hideInput.type = "hidden";
            hideInput.name = "content";

            //传入传入数据，只传递了一个参数内容，实际可传递多个。  
            hideInput.value = data;

            tempForm.appendChild(hideInput);

            window.open('about:blank', name, 'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes');

            //添加临时form
            document.body.appendChild(tempForm);
            //必须手动的触发，否则只能看到页面刷新而没有打开新窗口  
            tempForm.submit();

            //移除临时创建的form
            document.body.removeChild(tempForm);

        }

        /*
         * 页面加载完成执行
         */
        window.onload = function() {
            document.getElementById("open").onclick = openPostWindow("img/a.png", "陈黎明", "newWin");
        }
    </script>

    <body>
    </body>

</html>

menghuanzhiming

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
window.open()的用法及如何以post方式提交

一般window.open传参数都是用Get，方式..在url后面拼接参数；但有时候并不适用，如： 1）不想被看到参数信息 2）参数过长，get有限制会被截断 3）可能有中文编码问题所以需要用post方式；原理：open方法不能设置请求方式，一般网页的post都是通过form来实现的。如果仅仅模拟form的提交方式，那么open方法里那种可...
复制链接

扫一扫

专栏目录