Home > Web Front-end > JS Tutorial > body text

window.open submits content to a new window in post mode_javascript skills

WBOY
Release: 2016-05-16 17:45:28
Original
1172 people have browsed it
The first way
I was working on a web project recently and encountered a function that required passing parameters across pages, which required bringing the content of the current page to a newly opened subform. The previous The method is to pass an ID and then read the contents of the database in a new window. Although it is not too troublesome, if the content is not saved in the database and is only in draft state, it cannot be implemented, and users often think it is a bug. Consider using the get method to transfer, serialize all the required content and then transfer it through the URL, which seems very bloated, and the length of the content transferred by get is limited. So I thought of using the post method to deliver it. The problem is that the open method cannot set the request method. Generally, posts on web pages are implemented through forms. If you only simulate the submission method of the form, then the parameters in the open method that can set the form properties cannot be used. Finally, I found a way to combine the two. I set the target of the form to the same value as the name parameter of open, and posted the content to a new window through automatic recognition by the browser.

What is more interesting is that the onsubmit event cannot be triggered directly by calling the submit method of the form. After viewing the help document, it must be triggered manually, otherwise you will only see the page refresh without opening a new window. Only one parameter content is passed in the code, but multiple parameters can actually be passed.
The specific code is as follows:
Copy code The code is as follows:

<script> <br>function openPostWindow(url, data, name) <br>{ <br>var tempForm = document.createElement("form"); <br>tempForm.id="tempForm1"; <br>tempForm.method="post "; <br>tempForm.action=url; <br>tempForm.target=name; <br>var hideInput = document.createElement("input"); <br>hideInput.type="hidden"; <br>hideInput .name= "content" <br>hideInput.value= data; <br>tempForm.appendChild(hideInput); <br>tempForm.attachEvent("onsubmit",function(){ openWindow(name); }); <br>document.body.appendChild(tempForm); <br>tempForm.fireEvent("onsubmit"); <br>tempForm.submit(); <br>document.body.removeChild(tempForm); <br>} <br> function openWindow(name) <br>{ <br>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'); <br>} <br></script>

The second way
Copy code The code is as follows:

function openWindowWithPost(url,name,keys,values)
{
var newWindow = window.open(url, name);
if (!newWindow)
return false;
var html = "";
html = "< ;head>
";
if (keys && values)
{
html = "";
}
html = "
".toString() .replace(/^. ?*|\(?=/)|*. ?$/gi, "");
newWindow.document.write(html);
return newWindow;
}

It is recommended to use the first method. During the testing of the second method, it was found that it conflicts with the calendar pop-up box. If there is a calendar pop-up box on the sub-page, clicking the calendar box will continuously refresh the page. A calendar box will pop up. Of course, it could also be a problem with the calendar box I'm using.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template