Author - StudySection Post Views - 1,424 views
parameters

Open a popup window with a window.open() passing parameters as ‘post’

Target is to open a third-party page but not using query parameters in the URL, instead using a post approach. And this is to be achieved through javascript without creating.

This can be achieved by creating an Html page with the form submit with post method in the application which is and using action attribute with the post URL, but here the target is without creating the Html page, create on the fly Html content and submit a form from the client-side in the new window opened as a popup to the third party link at the server-side. This can be simply achieved using the following javascript code:
var windowName = 'myWindow';
var windowProperty = 'location=yes,height=700,width=800,scrollbars=1,status=yes,titlebar=no,top=100,left=300';
var data= getData();
// let data variable is the required array of data values to be submitted
var popupSubmitWindowForm = '<form id="popupDocumentForm" method="post" action="' + url + '" target="' + windowName+'">'
+ '<input type="hidden" name="InputParam0" value="' +data[0]+ '">'
+ '<input type="hidden" name="InputParam1" value="' +data[1]+ '">'
+ '<input type="hidden" name="InputParam2" value="' +data[2] + '">'
+ '</form> '
+ '<script>'
+ 'var popupDocumentForm= document.getElementById("popupDocumentForm");'
+ 'popupDocumentForm.submit();'
+ '</script>';
/* detect if the window is already opened. This is required especially in cases when dealing with third-party links*/
let windowExists = false;
if (popupDocWindow && popupDocWindow!=null) {
windowExists = true;
}
if (windowExists == true) {
popupDocWindow.close();
}
else {
// apply any required code
}
popupDocWindow = window.open('', windowName, windowProperty);
popupDocWindow.document.write(popupSubmitWindowForm);

To achieve on-the-fly form submit, we can simply create a form Html with input elements containing required post data and script that triggers the form submit action. Now this dynamic Html and javascript content can be written to the newly opened popup window from the parent window using javascript. This way we can open dynamic popup windows without actually creating Html pages with the ‘post’ method approach.

When working third-party apps, generally we face blocking restriction/domain restriction errors on the browser, so sometimes we need to detect if a window is already opened when reopening the window with new data. If you face such issues, then simply we need to first close the current window and then open the new window. Otherwise, if we want to open the windows simultaneously, then we can just create unique window names.

StudySection provides a Windows 10 certification exam to help those with skills in Microsoft Windows 10 operating system. This exam is available for two different levels namely “Foundation” and “Advanced”. This Windows 10 Certification can help you land in a good job position when attached to your resume.

Leave a Reply

Your email address will not be published.