The form will automatically send when page load, it will send to the iframe. But I want get the iframe content in the main page, so I create a function to test, parent.function. But I don't know where I should put this function and the parent.function. Firebug TypeErroe: parent.incomingValue is not a function. Help, appreciate.
$('#frame_form').submit();
parent.incomingValue("Hello world");
function incomingValue(val) {
alert(val)
}
<form target="iframe">
<input type="hidden" value="send"/>
</form>
<iframe name="iframe"> </iframe>
You should declare 'parent' as an object and set 'incomingValue' as a property like this:
var parent = {};
parent.incomingValue = function(val) {...}
Related
I am making browser webapp in javascript. The strange problem is, whenever I add iframe tag in my html. The javascript stops working.
My html:
<input type="text" id="input">
<button onclick="sean()"></button>
<iframe id="outp" src="about:blank"></iframe>
My JS:
function sean(){
var input = document.getElementById('input').value;
var iframe = document.getElementById('outp')
iframe.src= "https://"+input
alert('worked');
};
The funny thing is as soon as I comment the iframe tag (not even modifying js) the function works and displays the alert message otherwise it keeps saying sean not defined.
Here is a pen showing error, if needed:
https://codepen.io/ShazamBolt8/pen/yLpqeXZ
If possible please add a working snippet.
Thanks in advance :)
let input = document.getElementById("txt");
let btn = document.getElementById("btn");
let iframe = document.getElementById("ifr");
btn.addEventListener("click", () => {
iframe.src = "https://" + input.value;
alert("wo4ked");
});
<input id="txt" type="text" >
<button id="btn">GO</button>
<iframe id="ifr" src="about:blank" frameborder="10"></iframe>
Hopefully I've included enough of the code w/o having to post it all...
I have a main function that calls displayDropdown()- which calls an HTMLService and displays a modal with a dropdown and a text box:
.
This is the (condensed) javascript code that stores the data:
<html>
<input type="submit" value="Submit" class="action" onclick="sendData()" />
</html>
<script>
function sendData() {
var values = {};
values.textJob = document.getElementById("input").value;
values.selectedJob = document.getElementById("dropJob").value;
google.script.run.withSuccessHandler(closeIt).grabData(values);
};
function closeIt(){
google.script.host.close()
};
</script>
Then the grabData() function in my .gs file:
function grabData(values) {
if(values.textJob=="")
//return values.selectedJob;
Logger.log(values.selectedJob);
else
//return values.textJob;
Logger.log(values.textJob);
}
If I keep the returns commented out and try to log the data, I get the expected data logged. But if I reverse that, and return it instead, go back up to the main function just after displayDropdown() was called, and set a variable to equal the grabData function:
displayDropdown();
var stuff = grabData();
Logger.log(stuff);
I get an error that says:
Why can't I access the data?
This is what I usually do to send data from HTML form to GS:
HTML
<form method="POST" action="#" id="formID">
<button class="btn" type="submit">Send</button>
</form>
JS
document.querySelector("#formID").addEventListener("submit", function(e) {
var test = google.script.run.withSuccessHandler('client side function').processForm(this);
});
I usually pass 'this' as an argument and I process the information on the GS.
EDIT:
GS
function processForm(values){
Logger.log(values);
Logger.log(typeof values);
}
Screenshoots:
1- Web app
2- Server logs (function processForm)
Is there a way to fetch the URL / Location of the pop-up window?
CODE:
<html>
<head>
<script>
function openWin()
{
myWindow=window.open('http://www.google.com','','width=200,height=100');
console.debug(myWindow.location.href);
console.debug(window.location.href);
}
</script>
</head>
<body>
<input type="button" value="Open window" onclick="openWin()" />
</body>
</html>
The first console prints about:blank
While the second console prints the URL of the current page(i.e URL of the above code, it does not print the URL of the pop-up window)
Why isn't the first console printing the location (i.e http://www.google.com) ?
Can anyone help me out with this?
Thanks in advance.
Because browser security prevents you from getting the URL from any window that's not on the same domain as your script. So, if your code was running on example.com, you'd only be able to get the URL of any window that was also on example.com.
As #Hg3 says, you cannot access location.href for myWindow. window.open returns an empty DOMWindow.
However, you can overwrite window.open and maintain a simple array of all the windows you have opened.
//override window.open
var windows = [];
window._open = window.open;
window.open = function(url, name, params){
windows.push(name, url);
return window._open(url, name, params)
}
//function return href by name
function hrefByName(name) {
var index=(windows.indexOf(name));
return (index>-1) ? windows[index+1] : 'undefined';
}
//modified openWin function
function openWin(url, name) {
var params='width=200,height=100';
window.open(url, name, params);
//test, ouput current url and the windows array
console.log(hrefByName(name));
console.log(windows);
}
test markup :
<input type="button" value="google" onclick="openWin('http://google.com', 'google')" />
<input type="button" value="bing" onclick="openWin('http://bing.com', 'bing')" />
<input type="button" value="stackoverflow" onclick="openWin('http://stackoverflow.com', 'stackoverflow')" />
Of course, I guess you have a setup with dynamically generated URL's - just build random names or pass an unique number as name.
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();
<script type="text/javascript">
window.onload = function() {
document.getElementById('finalize_btn_top').onclick='bmlAuth();';
document.getElementById('finalize_btn_bottom').onclick='bmlAuth();';
}
function bmlAuth(){
//
}
</script>
I studied google search results and this should work but it is not working. I put it at the bottom of the page just to be sure the elements have loaded.
<input id="finalize_btn_bottom" type="image" name="" value="continue" onmouseover="this.src='<% =strFolder %>/images/b_submitorder_on.gif';" onmouseout="this.src='<% =strFolder %>/images/b_submitorder_off.gif'" src="<% =strFolder %>/images/b_submitorder_off.gif" alt="continue" onclick="bml_submit();">
What do I need to do different?
Thanks much!
Try passing in a function reference:
var $ = document.getElementById;
$('finalize_btn_top').onclick = bmlAuth;
$('finalize_btn_bottom').onclick = bmlAuth;