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();
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>
I made a button click counter for a website using some JavaScript.
The counter works well, but now I'm stuck in making the saving of the count. You know, if I click the button 3 times, the text says 3 Times. But I want to save that value so if the user refreshes the page, it should display 3 Times again.
I knew of using localStorage, I followed a simple tutorial and applied it to my code, but it does not seem to be working. When I run the page in Microsoft Edge and see the Debug page (F12), the console throws an error that says: Unable to get property 'getItem' of undefined or null reference. I searched in other posts but no one of these could solve my problem. It seems to be stuck when retrieving the value in localStorage.
This is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Increment count when button is clicked</title>
</head>
<body>
<input type="button" value="Registrar" id="countButton" />
<input id="ocityField" type="text" value="" placeholder="Ciudad de Origen"/>
<input id="cityField" type="text" value="" placeholder="Ciudad de participación"/>
<input id="name" type="text" value="" placeholder="Nombre"/>
<p>Personas Registradas: <span id="displayCount">0</span></p>
<script type="text/javascript">
var count = 0;
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
var textbox = document.getElementById("ocityField");
var textboxa = document.getElementById("cityField");
var textboxb = document.getElementById("name");
if(window.localStorage.getItem('count')){
var savedcount = window.localStorage.getItem('count');
count = window.localStorage.getItem('count');
}else{
count = 0;
}
display.innerHTML = count;
button.onclick = function(){
var mystring = textbox.value;
var mystring2 = textboxa.value;
var mystring3 = textboxb.value;
if(!mystring.match(/\S/) || !mystring2.match(/\S/) || !mystring3.match(/\S/)) {
alert ('Empty value is not allowed');
return false;
} else {
count++;
window.localStorage.setItem('count', count);
display.innerHTML = count;
textbox.value = "";
textboxa.value = "";
textboxb.value = "";
return true;
}
}
</script>
</body>
</html>
I tried using window.localStorage and just localStorage but no one did work.
May be that you use the IE browser does not support localStorage，The code can run in Chrome49.
Can I Use localStorage, here you can check what browser supports localStorage with version numbers.
Alternate way to store data on client side is cookies if localStorage doesn't supported by browser.
You can also use third party plugins like Modernizer, to check whether browser supports or not.
Modernizr.localstorage if it evaluate to true the browser supports localStorage.
Following example demonstrates localStorage and cookies depending on browser compatibility. uses Modernizer and jQuery
codepen
how can I run Function in original page from window.open
original_page.html
<div id="Processing" style="display:none;">
<button onclick="window.open("Processing_window.html")">open</button>
</div>
<script language="JavaScript">
function submit_form() {
var upgradeForm = document.getElementById('upgradeForm');
setTimeout("upgradeForm.submit()",3000);
}
</script>
========
Processing_window.html
<script language="JavaScript">
function Processing_window() {
var doc = window.opener.document, Processing = doc.getElementById("Processing");
Processing.style = '';
submit_form(); //Here the problem
window.close();
}
setTimeout ("Processing_window()",5000);
</script>
========
I went to run "submit_form();" funcion from Processing_window.html
To access functions from the opener, use window.opener.functionName, assuming both are in the same domain.
function Processing_window() {
var doc = window.opener.document, Processing = doc.getElementById("Processing");
Processing.style = '';
// Here's the solution
window.opener.submit_form();
window.close();
}
setTimeout ("Processing_window()",5000);
You need to HTML encode the quotation marks in the code in the attribute, or use apostrophes:
<button onclick="window.open('Processing_window.html')">open</button>
As long as the page that you open has the same origin (same server, same protocol), you can use the opener property to access the parent windows window object. There's where you find the reference to the function:
window.opener.submit_form();
You can, but not cross-domain. Only in the same domain.
<script>
function new_win_fun() {
var wind = window.open("Processing_window.html");
var upgradeForm = wind.document.getElementById("upgradeForm");
wind.setTimeout("upgradeForm.submit()",3000);
}
</script>
<button onclick="new_win_func()">Run</button>
I need to POST form values from one page to another using Javascript.
Now, I know that I could use a server-side technology like ASP.Net or PHP to post values but I am not allowed to use any server side script.
I am aware that using the GET method, I can pass the form values as a query string but the values will not be passed securely (which is an important requirement!)
The conditions listed below:
This code should take the values that are posted to the page and
repost to target page. HTTP POST only (not get).
In no cases, even error, the request should not stop on this bridge page.
The script needs to handle multiple posted values.
Try to use standard javascript (no 3rd party library)
Script needs to work in IE, FF, Safari, most standard browsers
Can anyone please help me find a solution to this or point me to some resource that will help me find the soln? Thanks in advance. Below is the code for passing values as a query string. Can I modify this so that my above requirements are satisfied?
FORM
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function goto_page(page) {
var usbnum = document.getElementById('usbnum').value;
var usbcode = document.getElementById('usbcode').value;
var q_str = '?usbnum=' + usbnum + '&usbcode=' + usbcode;
var url = page + q_str;
window.location = url;
}
</script>
</head>
<form id="form1" method="post">
<div>
USB No: <input name="usbnum" id="usbnum" type="text" size="80" /><br />
USB Code: <input name="usbcode" id="usbcode" type="text" size="80"/>
</div>
Next
</form>
</body>
</html>
BRIDGE PAGE
<html>
<head>
<title>Bridge Page</title>
<script type="text/javascript">
function get_params() {
var url = window.location.href;
var q_str_part = url.match(/\?(.+)$/)[1];
var val_pairs = q_str_part.split('&');
var params = {};
for (var i = 0; i < val_pairs.length; i++) {
var tmp = val_pairs[i].split('=');
params[tmp[0]] = typeof tmp[1] != 'undefined' ? tmp[1] : '';
}
return params;
}
function write_params() {
var params = get_params();
var txt = 'Hello ';
for (var i in params) {
txt += params[i] + ' ';
}
var body = document.getElementsByTagName('body')[0];
body.innerHTML += txt;
}
function write_params() {
var params = get_params();
var num_container = document.getElementById('usbnum');
var code_container = document.getElementById('usbcode');
num_container.innerHTML = params.usbnum;
code_container.innerHTML = params.usbcode;
}
</script>
</head>
<body onLoad="write_params()">
</body>
</html>
POST data can only be handled by server side code. There is no way you can use them in your javascript without help from a server side code.
You can only use GET or you can think about cookies. But at other hand, why do you want to change current page?! you can use AJAX to load more data without refreshing and no need of posting or getting variables.
In this example, alert is blank;
I want to read the location of iFrame, I am using object.src for this but it work only if I set its src attribute. But I set iFrame's location using window.open method and in this case it is not working. What I do ?
<body>
<iframe id="location" name="address" style="width:700px; height:700px;">
</iframe>
<script type="text/javascript" language="javascript">
window.open("http://www.google.com","address");
function clickMe()
{
var src = document.getElementBy Id("location").src;
alert(src);
}
</script>
<input type="button" onclick="clickMe()" value="click Me"/>
</body>
Instead of using window.open(), why don't you just use:
document.getElementById("location").src = "http://www.google.com";
Now you can get its location using getElementById()
You can do that by accessing the location.href attribute. Of course, for security reasons, browsers won't let you access the iframe's DOM if it's another domain.
var oIframe = document.getElementById("location");
// for compatibility
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
alert(oDoc.location.href);
Same security issue if you access via the handle which should work in the same domain
<script>
var win;
function load(link) {
win=window.open(link.href,link.target)
return win?false:true;
}
function tell(winName) {
try {
alert(win.location.href)
try {
var handle = window.open('',winName);
alert(handle.location.href)
}
catch(e) {
alert('oops getting location via window handle:'+e.message)
}
}
catch(e) {
alert('Ooops getting location:'+e.message)
}
}
</script>
<iframe src="about:blank" name="if1"></iframe><br/>
Load foreign link<br />
Load local link<br />
Tell<br />