I used a variation of the above but instead of printing html I built a form and submitted it to the 3rd party url:
var mapForm = document.createElement("form");
mapForm.target = "Map";
mapForm.method = "POST"; // or "post" if appropriate
mapForm.action = "http://www.url.com/map.php";
var mapInput = document.createElement("input");
mapInput.type = "text";
mapInput.name = "addrs";
mapInput.value = data;
mapForm.appendChild(mapInput);
document.body.appendChild(mapForm);
map = window.open("", "Map", "status=0,title=0,height=600,width=800,scrollbars=1");
if (map) {
mapForm.submit();
} else {
alert('You must allow popups for this map to work.');
}
Answer from php-b-grader on Stack OverflowI used a variation of the above but instead of printing html I built a form and submitted it to the 3rd party url:
var mapForm = document.createElement("form");
mapForm.target = "Map";
mapForm.method = "POST"; // or "post" if appropriate
mapForm.action = "http://www.url.com/map.php";
var mapInput = document.createElement("input");
mapInput.type = "text";
mapInput.name = "addrs";
mapInput.value = data;
mapForm.appendChild(mapInput);
document.body.appendChild(mapForm);
map = window.open("", "Map", "status=0,title=0,height=600,width=800,scrollbars=1");
if (map) {
mapForm.submit();
} else {
alert('You must allow popups for this map to work.');
}
Thank you php-b-grader. I improved the code, it is not necessary to use window.open(), the target is already specified in the form.
// Create a form
var mapForm = document.createElement("form");
mapForm.target = "_blank";
mapForm.method = "POST";
mapForm.action = "abmCatalogs.ftl";
// Create an input
var mapInput = document.createElement("input");
mapInput.type = "text";
mapInput.name = "variable";
mapInput.value = "lalalalala";
// Add the input to the form
mapForm.appendChild(mapInput);
// Add the form to dom
document.body.appendChild(mapForm);
// Just submit
mapForm.submit();
for target options --> w3schools - Target
If the two pages are on the same domain, a third way is to use HTML5 localStorage: http://diveintohtml5.info/storage.html
In fact localStorage is precisely intended for what you want. Dealing with GET params or window/document JS references is not very portable (even if, I know, all browsers do not support localStorage).
Here's some very simple pure JavaScript (no HTML, no jQuery) that converts an object to JSON and submits it to another page:
/*
submit JSON as 'post' to a new page
Parameters:
path (URL) path to the new page
data (obj) object to be converted to JSON and passed
postName (str) name of the POST parameter to send the JSON
*/
function submitJSON( path, data, postName ) {
// convert data to JSON
var dataJSON = JSON.stringify(data);
// create the form
var form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', path);
// create hidden input containing JSON and add to form
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", postName);
hiddenField.setAttribute("value", dataJSON);
form.appendChild(hiddenField);
// add form to body and submit
document.body.appendChild(form);
form.submit();
}
Use some PHP like this on the target page to get the JSON:
$postVarsJSON = $_POST['myPostName'];
$postVars = json_decode( $postVarsJSON );
Or, more simply for JavaScript:
var postVars = JSON.parse( <?php $_POST['myPostName']; ?> );
Window.open and pass parameters by post method
I there a simple way of sending JSON data using $window.open() and angularjs?
gwt open a new window and post json data - Stack Overflow
Window.open() vs $.get()
Instead of writing a form into the new window (which is tricky to get correct, with encoding of values in the HTML code), just open an empty window and post a form to it.
Example:
<form id="TheForm" method="post" action="test.asp" target="TheWindow">
<input type="hidden" name="something" value="something" />
<input type="hidden" name="more" value="something" />
<input type="hidden" name="other" value="something" />
</form>
<script type="text/javascript">
window.open('', 'TheWindow');
document.getElementById('TheForm').submit();
</script>
Edit:
To set the values in the form dynamically, you can do like this:
function openWindowWithPost(something, additional, misc) {
var f = document.getElementById('TheForm');
f.something.value = something;
f.more.value = additional;
f.other.value = misc;
window.open('', 'TheWindow');
f.submit();
}
To post the form you call the function with the values, like openWindowWithPost('a','b','c');.
Note: I varied the parameter names in relation to the form names to show that they don't have to be the same. Usually you would keep them similar to each other to make it simpler to track the values.
Since you wanted the whole form inside the javascript, instead of writing it in tags, you can do this:
let windowName = 'w_' + Date.now() + Math.floor(Math.random() * 100000).toString();
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "openData.do");
form.setAttribute("target", windowName);
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "message");
hiddenField.setAttribute("value", "val");
form.appendChild(hiddenField);
document.body.appendChild(form);
window.open('', windowName);
form.submit();
You could pass options as a URL parameter:
window.open( myURL + "/?options=" + JSON.stringify(options) );
There is no such facility built-in to the language.
However, it's fairly easy to write one yourself.
For example:
function popup(url, name, options) {
if (arguments.length === 2) {
options = name;
name = options.name;
}
var features = false;
for (var key in options) {
if (!options.hasOwnProperty(key)) continue;
if (key === "name") continue;
if(features)
features += ",";
features += key + "=";
if (!options[key])
features += "no";
else if (options[key] === true)
features += "yes";
else
features += options[key];
}
return window.open(url, name, features);
}
You may create a form (on the fly) with an input (where you fill the value with the JSON) and a target-attribute regarding to name of the popup (second parameter of window.open()).
Then send this form.
- Open the popup:
var popup = window.open(...) - Assign the json object to a new variable in the new window:
popup.json = ... - Use the variable
jsonin your popup (it will be accessible aswindow.jsonor justjsonfrom JavaScript code running in the popup).
Use the write()-Method of the Popup's document to put your markup there:
$.post(url, function (data) {
var w = window.open('about:blank');
w.document.open();
w.document.write(data);
w.document.close();
});
Accepted answer doesn't work with "use strict" as the "with" statement throws an error. So instead:
$.post(url, function (data) {
var w = window.open('about:blank', 'windowname');
w.document.write(data);
w.document.close();
});
Also, make sure 'windowname' doesn't have any spaces in it because that will fail in IE :)
Hello Philipp
Welcome to the Microsoft Community.
This is not a bug but a result of how the Edge JSON Viewer behaves when opening a URL programmatically via window.open. Here's an explanation of what's happening and how you can address the issue:
Explanation:
- Manual URL Entry:
- When you manually input the JSON URL in Edge's address bar, Edge knows it's serving JSON content and uses its built-in JSON Viewer to pretty-print it.
- window.open() Behavior:
- When you use window.open() to programmatically open the URL, Edge does not automatically invoke its JSON Viewer. Instead, it treats the opened page as plain text or raw JSON, and the pretty-print functionality is not applied.
- Reason:
- Edge's JSON Viewer may only be triggered when the request is a direct manual navigation or when the JSON content is properly formatted and served with the correct Content-Type (application/json) header, but window.open doesn't trigger the JSON Viewer in the same way.
Solutions:
- Manually Open the URL
- The simplest workaround is to let the user click the JSON URL (e.g.,
Open JSON), which will behave like manual navigation and trigger the JSON Viewer.
- Open the JSON in a New Tab with Pretty Formatting
- You can use a JavaScript library (e.g., JSON.stringify) to pretty-print the JSON content before displaying it in a new tab or window. Example:
This fetches the JSON data, formats it nicely, and displays it in a new window or tab usingfetch("https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&hourly=temperature_2m") .then(response => response.json()) .then(data => { const prettyJSON = JSON.stringify(data, null, 2); // Pretty printconst newWindow = window.open(); newWindow.document.write(`${prettyJSON}`); newWindow.document.close(); });tags.
- Use an External JSON Viewer Tool
- If you frequently need to pretty-print JSON, you can use tools like:
- jsonviewer.stack.hu
- jsonformatter.org
- These tools can take raw JSON data and pretty-print it in a visually appealing manner.
- Disclaimer: This is a non-Microsoft website. The page appears to be providing accurate and safe information. Watch out for ads on the site that may advertise products frequently classified as PUP (Potentially Unwanted Products). Thoroughly research any product advertised on the site before you decide to download and install it.
Summary:
- The behavior you're seeing is by design and not a bug. To ensure JSON is always pretty-printed when using window.open, either fetch the data and format it programmatically (Solution 2) or let the user manually click a link (Solution 1).
Best Regards,
William.Y | Microsoft Community Support Specialist
Thanks, I implemented the change and and the users are now clicking on a simple link in the javascript/angular UI, if they decide to view the plain JSON data from the WebService and this is working fine. The JSONViewer is opening when clicking a simple link (was not opening when using window.open(...)).
Strange behaviour, thanks for the workaround, this did solve my problem.
Greetings
Philipp