JSFiddle - React, Tailwind, and code Playground
HTML
<p>
<label>Enter URL with http:// here:</label>
<input id="urlValue" type="text" value="http://google.pt" />
</p>
<p>
<label>Would you like to open a new window?</label><br />
<input name="yesNo" id="yes" type="radio" />Yes<br />
<input name="yesNo" id="no" type="radio" />No
</p>
<p>
<label>Other Options</label><br />
<input name="checkGroup" id="fullScreen" type="checkbox" />Full Screen<br />
<input name="checkGroup" id="scrollBar" type="checkbox" />Scroll Bar<br />
<input name="checkGroup" id="statusBar" type="checkbox" />Status Bar<br />
<input name="checkGroup" id="toolBar" type="checkbox" />Tool Bar<br />
</p>
<p>
<button id="goButton">Go</button>
<button id="full">Full it</button>
</p>
JavaScript
document.getElementById("goButton").addEventListener("click", function() {
var myWindow, params = '', urlValue = document.getElementById("urlValue").value;
params += scrollBar.checked ? "scrollbars=yes," : "scrollbars=no,";
params += statusBar.checked ? "status=yes," : "status=no,";
params += toolBar.checked ? "toolbar=yes" : "toolbar=no";
params += fullScreen.checked? ",type=fullWindow,fullscreen" : "";
// Open window
if (yes.checked) {
myWindow = window.open(urlValue, "Window Name", params);
} else if (no.checked) {
myWindow = window.open(urlValue, "Window Name", "_self");
}
// Fullscreen modern browsers DOESN'T WORK! - It's just to demonstrate that doesn't work :)
if(fullScreen.checked) {
var el = myWindow.document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
rfs.call(el);
}
console.log(params);
});