For example right, Google website.
I had found that Search textbox is name=q and Search button is name=btnK.
I am managed to open the browser by using the
var wdw = window.open(url, "_blank");
But I can't populate the data into the textbox as well as trigger the button.
I have tried like
wdw.document.getElementsByName("q").value = "something";
But still failed, please kindly advise. Thanks
2nd Attempt
var vWindow = window.open(GOOGLE_SITE, "_blank");
vWindow.onload = function() {
vWindow.document.getElementsByName("q").value = "Find ABC";
}
You meet the problem of security. Protocol, domain, etc
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Another approach:
<!DOCTYPE html>
<html>
<body>
<button onclick="openNewWindow()">Open window</button>
<script>
function openNewWindow() {
// Open new window
var newWindow = window.open("", "My New Window", "width=500,height=500");
newWindow.document.write("<p>My New Widown</p>");
newWindow.document.write("<input type='text' id='name' />");
newWindow.document.write("<button id='ok'>OK</button>");
// populate the data into the textbox
newWindow.document.getElementById('name').value = "Test";
// Listen button click event
var btn = newWindow.document.getElementById('ok');
btn.addEventListener('click', clickOk);
}
function clickOk(){
console.log("Ok Click");
}
</script>
</body>
</html>
Related
I have a simple webapp that show a button and when a user clicked, it will open a new window that shows a website. What I want to do is when a user clicked the button, it will get the value from my google sheet and open a new window based on that value. Then, the webapp will update the value in the google sheet with a new value.
For example:
if the value in my google sheet is "Google", it will open a window to "www.google.com" and then update the google sheet value to "other website".
I have succesfully made the function for updating the value on google sheet whenever a user clicked the button but I fail in getting the value from the code.gs/google sheet to my Javascript.
Please help.
here is my code.gs:
var url = "url"; //mygooglesheet url
var web = "";
function doGet(e) {
let tmp = HtmlService.createTemplateFromFile("index");
return tmp.evaluate();
}
function setWebsite () {
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("website");
web = ws.getRange(1,1,1,1).getValue();
if (web === "Google") {
ws.getRange(1,1,1,1).setValue("Youtube");
}
else if (web === "Youtube") {
ws.getRange(1,1,1,1).setValue("Facebook");
}
else {
ws.getRange(1,1,1,1).setValue("Google");
}
}
function getWebsite() {
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("website");
var web = ws.getRange(1,1,1,1).getValue();
return web;
}
my index.html:
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Please Click Below</h1>
<!-- <h2><?=web?>:</h2> -->
<button id = "btn" type="submit" >Open Window</button>
<script>
document.getElementById("btn").addEventListener("click", doStuff);
var web = "";
function doStuff() {
google.script.run.getWebsite(); //dont know for sure if this is needed or not
google.script.run.setWebsite();
web = <?=web?>; //dont know for sure if this is needed or not
if (web === "Google") {
window.open("https://www.google.com/");
}
else if (web === "Youtube") {
window.open("https://www.youtube.com/");
}
else {
window.open("https://www.facebook.com/");
}
}
</script>
</body>
</html>
Right now, my webapp only open a new window to "facebook.com" and update to the next value in the code. I tried "google.script.run.withSuccessHandler(onSuccess).getWebsite()" but not successful to get the variable value from the code.gs, please help.
Thank you.
Issue:
You want to open a new tab with the URL returned by getWebsite() when the button is clicked.
Solution:
In order to handle data returned by a server-side function called by google.script.run, use the success handler. The function called by this handler will be passed the value returned by the server-side function (getWebsite()) as a parameter.
Code sample:
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Please Click Below</h1>
<button id = "btn" type="submit" >Open Window</button>
<script>
document.getElementById("btn").addEventListener("click", doStuff);
function doStuff() {
google.script.run.withSuccessHandler(openWebsite).getWebsite();
}
function openWebsite(web) {
if (web === "Google") {
window.open("https://www.google.com/");
} else if (web === "Youtube") {
window.open("https://www.youtube.com/");
} else {
window.open("https://www.facebook.com/");
}
}
</script>
</body>
</html>
Note:
If the data returned by getWebsite() is supposed to remain static between the moment in which the page first loads and when the button is clicked, you could also use the approach mentioned by Mike Steelson, using template scriplets.
In html, in script section, write
<? var web = getWebsite(); ?>
and erase google.script.run.getWebsite();
I have a function to redirect the page.
Function works perfectly when I have code like this.
document.getElementById("orderNow").addEventListener("click", function() {
// window.location.href = "http://www.w3schools.com", "_blank";
var name = document.getElementById("customerName").textContent;
var address = document.getElementById("customerStreet").textContent;
var city = document.getElementById("customerCity").textContent;
var state = document.getElementById("customerState").textContent;
var zip = document.getElementById("customerPcode").textContent;
var country = document.getElementById("customerCountry").textContent;
var phone = document.getElementById("customerPhone").textContent;
window.location.href = "https://www.amazon.com/gp/buy/addressselect/handlers/display.html?hasWorkingJavascript=1";
var username = document.getElementById('enterAddressFullName');
alert(username);
But if delete alert function or this:
var username = document.getElementById('enterAddressFullName');
Redirect won't work!
I don't know how to name the problem but this is my problem.
I don't want those last two lines of code. Help me to fix
Created a basic click event example for you below.
let orderButtonEl = document.getElementById("orderNow").addEventListener("click", function() {
// ... get all the values you need here and then do the redirect below
alert("Click Event Working!!");
// Redirect
window.location.href = "https://www.amazon.com/gp/buy/addressselect/handlers/display.html?hasWorkingJavascript=1";
});
<button id="orderNow"> Order Now </button>
EDIT:
Not sure what you are doing, but copy the following and save it as an index.html file. Open it with chrome, click on the button and it will redirect you.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="orderNow">
Order Now
</button>
<script type="text/javascript">
let orderButtonEl = document.getElementById("orderNow").addEventListener("click", function() {
// ... do stuff
// Redirect
window.location.href = "https://www.amazon.com/gp/buy/addressselect/handlers/display.html?hasWorkingJavascript=1";
});
</script>
</body>
</html>
I have mentioned the code below which I have been trying. I am successfully able to open a url in a new tab but unable to access the content using DOM. so someone please suggest me any ideas how to access the data...
Thank you in advance.
<html>
<head>
<script>
var url = "www.website.com";
var Tab = window.open(url);
var Name = Tab.document.getElementsByClassName('uniquename').innerHTML;
alert(Name);
</script>
</head>
</html>
You can use onLoad event in this case as:
var url = "www.website.com";
var Tab = window.open(url);
Tab.onload = function () {
var elems = Tab.document.getElementsByClassName('uniquename');
elems.forEach(function(elem,index){
console.log(elem)
})
};
But your URL in the child window should be in same domain.
I have a js rendered in HTML which would give a preview of the form. The code is functioning correctly but it gives me the output on the same page rather i want to open it in a pop-up window. I have tried using window.open () with no luck. Could you please help me out in how i can use window.open() for the below. The button ID is preview. When the button is clicked it executes a function similar to below
$("#preview").click(function() {
$("#formpreview").delete();
var fieldSet = ...................});
You can populate the html in the child window using the below example:
HTML
<!DOCTYPE Html />
<html>
<head>
<title></title>
</head>
<body>
<input type="button" id="launch" value="Launch Child Window"/>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
JavaScript
var btnLaunch = document.getElementById("launch");
btnLaunch.onclick = function () {
var childWindow = window.open("", "", "height=500, width=500");
var html = "";
var theVariable = "Conent in Child Window";
html += "<p>" + theVariable + "</p>";
childWindow.document.body.innerHTML = html;
}
Store the popup as a variable, then set the popup's HTML to whatever you need.
$("#preview").click(function() {
var myWindow = window.open("", "Popup", "width=300, height=500");
myWindow.document.write("<html>This is where your content goes</html>");
});
I have my website
www.aplicatii-iphone.ro
and another
page.html on localhost
<html>
<head>
<title>Object References across Iframes</title>
<script type="text/javascript">
window.onload = function(){
var form = document.getElementById('testForm');
form.testBtn.onclick = sendData;
}
function notify() {
//alert('iframe loaded');
var iframeEl = document.getElementById('ifrm');
if ( iframeEl && iframeEl.parentNode && document.createElement ) {
var newTxt = document.createTextNode('The iframe has loaded and your browser supports it\'s onload attribute.');
var newPara = document.createElement("p");
newPara.className = 'demo';
newPara.appendChild(newTxt);
iframeEl.parentNode.insertBefore(newPara, iframeEl);
}
}
function sendData() { // to form inside iframed document
// frames array method:
// window.frames['ifrm'].document.forms['ifrmTest'].elements['display'].value = this.form.testEntry.value;
var ifrm = document.getElementById('ifrm');
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
var form = doc.getElementById('search-input'); // <------<< search input
form.display.value = this.form.testEntry.value;
form.submit();
}
// test in iframed doc
var counter = 0;
</script>
</head>
<body>
<form id="testForm" action="#">
<p><input type="text" name="testEntry" size="30" value="[enter something]" /> <input name="testBtn" type="button" value="Click Me" /></p>
</form>
<iframe name="ifrm" id="ifrm" src="http://www.aplicatii-iphone.ro" onload="notify()" width="900">Sorry, your browser doesn't support iframes.</iframe>
</body>
</html>
And every time I press the button Click Me, I want that the state of www.aplicatii-iphone.ro to be like a user searched for that value written in "testEntry" from outside of the iframe.
I tried something there ... but I can't figure it out ... any help please?
I took the example from here http://www.dyn-web.com/tutorials/iframes/refs.php
If you know you're using a modern browser, you could use postMessage to communicate between the frames. Here's a good write-up: http://ajaxian.com/archives/cross-window-messaging-with-html-5-postmessage
If you need to support legacy browsers, you could use Google Closure's CrossPageChannel object to communicate between frames.
Unfortunatly, this is not possible due to the Same orgin policy.
And changing the document.domain-value only helps if you try to connect a subdomain with the main-domain.
Edit
If you avoid the same-orgin-problem by using a page on the same website, this should work for you:
window.frames['ifrm'].document.getElementById("search-input").value = document.getElementsByName("testEntry")[0].value;
window.frames['ifrm'].document.getElementById("cse-search-box").submit();