I've been working on this about 3 hours now.. I can't figure out why it's not working.
The first button should open an iframe, which it does. The second should do the same. Somewhy it's not willing to do so!
Here is my code:
<body>
<input type="button" id="knopSql1" type="submit" value="1e Klasse"></input>
<script>
document.getElementById('knopSql1').onclick = function() {
var iframe = frames[0] || document.createElement('iframe');
iframe.src='http://www.example.com/sql.php';
document.body.appendChild(iframe);
};
</script>
<input type="button" id="knopSql2" type="submit" value="2e Klasse"></input>
<script>
document.getElementById('knopSql2').onclick = function() {
var iframe = document.createElement('iframe');
iframe.src'http://www.example.com/sql2.php';
document.body.appendChild(iframe);
};
</script>
</body>
Check the code of second script
iframe.src'http://www.example.com/sql2.php';
Should be
iframe.src ='http://www.example.com/sql2.php';
You are missing '=' operator
You are missing the = sign in the last block of code.
You wrote:
iframe.src'...';
instead of
iframe.src = '...';
By the way, this would take way less code in jQuery :)
JSFiddle
EDIT: Sorry, did not see that someone answered before me!
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'm sorry to post with my question but I really don't understand. There are some moments like this one where I have the impression that nothing work in web.
I'm trying to do something pretty simple, I just want to reload a page and add a parameter by clicking on a button with jQuery. I searched and of course I found solutions but it doesn't work for me and I really don't understand why.
I tried several solutions but none works.
$(document).ready(function() {
$("#btnDL").click(function() {
/*window.location.href = window.location.href.replace( /[\?#].*|$/, "?dl=1" );*/
/*if(!window.location.hash) {
window.location.replace(window.location.href + "?dl=1");
}*/
/*var url = new URL(window.location.href);
url.searchParams.set('dl','1');
location.reload();*/
var url = window.location.href;
url += '?dl=1'
window.location.href = url;
});
});
Here is my code (I let some solutions I tried in comment), this doesn't work, when I click on my button it just refresh the page but the URL is still the same.
I think you've seen this question a lot of times so sorry for the inconvenience.
Thank you
$(document).ready(function() {
$("#btnDL").click(function() {
var url = window.location.href;
window.location.href = window.location.href + "?dl=1";
});
});
try this
I have tested it on Google Chrome and it is appending id with the url. Try it:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#btnDL").click(function() {
var url = window.location.href;
alert(url);
url += '?dl=1'
window.location.href = url;
})
});
</script>
</head>
<body>
<button id='btnDL'>
Click Me
</button>
</body>
</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();
<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;
I have just started learning Javascript. I want "Hello World!" to be written to a webpage once a user clicks a button. I have tried this:
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
document.write("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
I can get it to do a window.alert("Hello World!") but not do document.write("Hello World!") for some reason. What happens is the button disappears and no text is displayed. My guess is that the problem is in the document.write but I do not know how to work around it. Any suggestions?
Because the document has already been written at that point. You can set text like so:
<button id="lol">blah</button>
<script>
function setText( obj, to ) {
obj.textContent? obj.textContent = to : obj.innerText = to;
}
var lol = document.getElementById('lol')
lol.onclick = function() {
var p = document.createElement('p');
document.body.appendChild(p);
setText( p, 'hi' );
}
</script>
Another popular but often looked down technique would be innerHTML.
Document.write is used to write to the currently loading HTML file. Once the page has been loaded, and a user begins interacting with the page, document.write is useless.