I have two iframes in the document movie.htm:
<iframe id='movies' class='top' frameborder='0'></iframe>
and
<iframe src="moviesearch.htm" class="bottom" frameborder="0">
Within moviesearch.htm there is an input tag
<input id="search_str" type="text">
I was wondering how I access this value (contained in moviesearch.htm) using JavaScript in the document movie.htm.
As the user is typing the field continuously it would require that the value be updated real-time within movie.htm.
How would I achieve this in JavaScript?
If both pages are in the same domain, you'll be able to iframe.contentDocument. https://developer.mozilla.org/en/XUL/iframe#p-contentDocument
postMessage.
https://developer.mozilla.org/en/DOM/window.postMessage
movie.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Current value:<div id="updatedvalue"></div>
<iframe src="moviesearch.htm"></iframe>
</body>
<script>
window.addEventListener
("message", function(e) {
document.getElementById("updatedvalue").innerHTML = e.data;
}, true);
</script>
</html>
moviesearch.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" onkeyup="sendMessage(this.value)">
</body>
<script>
function sendMessage(message) {
window.parent.postMessage(message, "*");
}
</script>
</html>
Related
I'm newbie to web programming and I can't understand why the following code doesn't work.
It is supposed to remove permanently the content of the div element when the button is pressed, but it disappears for a while and then reappears.
The code is the following:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form onSubmit="prueba()">
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I believe what's happening is that your button is submitting a form, which sends the form to the web server then reloads your page. So:
Your "onSubmit" JS runs immediately and clears the div content.
Your page reloads and the content comes back.
Try something like this instead of a form (i.e. remove the surrounding form tag):
<button onclick="prueba()">Entrar</button>
Try this. You don't need a form to hide a DIV
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<input type="button" onclick="prueba()" value="Entrar">
</body>
</html>
DEMO : http://jsfiddle.net/36pvts4t/2/
try this , for me this is working .This code is remove the text in div with id "uno" , on form submit .
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
console.log("Inside the function preueba ");
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form action="#" method="get" onSubmit="prueba()" target="_blank" >
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I created a demo page where I had a text box on parent window where I input the URL and on click of a button the URL loads on the Iframe.. and it works!
Below is the Code for the same:
HTML
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<iframe id="display" src="http://jqueryui.com"></iframe>
<br>
<input type="text" id="url" value="http://jquery.com">
<button type="button" id="load">Load</button>
JS:
$(document).ready(function () {
$('#load').click(function () {
$('#display').attr('src', $('#url').val());
});
});
And here is the Fiddle for 1st Option (which is working): http://jsfiddle.net/Hs87s/
BUT now the issue, I want to send the URL change request from one One iframe and load the URL in the Second Iframe.
All I did, added one new Frame and added button and text box in a different html and calling that html page in second iFrame. BUT this doesn't work.
below is the code for the second option:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
</script>
<style>
iframe {
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<iframe id="display" src="http://jqueryui.com"></iframe>
<br>
<iframe id="inputURL" src="button.html"></iframe>
</body>
</html>
Code for button.html:
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$('#load').click(function () {
//alert("hi");
parent.$('#display').attr('src', $('#url').val());
});
});
</script>
</head>
<body>
<input type="text" id="url" value="http://jquery.com">
<button type="button" id="load">Load</button>
</body>
Can anybody please suggest how I can make the second option work?
Let me know if you need any other information.
Please suggest.
The "button" frame can access any parent JS function by prepending "parent." in front of it, as long as they're on the same domain.
So the button frame would use:
parent.functionname();
....then the parent would contain that function.
EDIT:
Your click handler needs to be in the same page as your button, and you need to refer to the frame in the parent:
$(document).ready(function() {
$('#load').click(function() {
//alert("hi");
parent.$('#display').attr('src', $('#url').val());
});
});
I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...
I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<!DOCTYPE html>
<html>
<frameset frameborder="1" rows="50%, *">
<frame name="f1" src="Page1.html" />
<frame name="f2" src="Page2.html"/>
</frameset>
</html>
page1.html code
<!DOCTYPE html>
<html>
<head>
<style>
.content {display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails" border="1">
<th>Result Details</th>
<tr>
<td>
Click on me to see more details in other page
<div class="content">
<p> R1 data</p>
</div>
</td>
</tr>
</table>
</body>
</html>
And Page2.html code
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table').on('click', 'tr', function () {
var doc =window.top.frames['f2'].document;
var divElmnt = $(doc.getElementById('myDiv'));
$(divElmnt.html($(this).find('.content').html()));
});
});
With this code, on clicking on table row, i am able to display the div "content" content in "mydiv" div of page2.
This works in IE and FF but wont work in Chrome. Error: doc is undefined.
What is the equivalent for window.top.frames['f2'] for chrome.
Give your FrameSet and your Frame an ID:
var $fs = $("#fs");
var f2 = $fs.find("#f2");
f2 is now a jQuery object.
Issue was with Chrome security flag for local files i.e., file:/// . After launching Chrome with "--allow-file-access-from-files" flag option, top.frames worked.
Also I found a useful document on Inter-Frame Communication with JavaScript here.
I'm working on a webpage that will consist of a large main frame, with a small frame across the bottom with a text box and submit button. I need the submit button to change the main frame to the url in the text box. My code is below, but it only works if the url ends in a file name (e.g., index.htm). It won't work if the url ends in .com or /folder/ where index.htm is assumed. How can I fix it?
Here is my html/javascript. In my index.htm I have:
<html>
<head>
<title>Menu Bar</title>
</head>
<frameset rows="*,30">
<frame src="main.html" name="main" id="main">
<frame src="menu.html" name="menu" id="menu">
</frameset>
<body>
</body>
</html>
The main.html is basically a blank html document (it has basic html, head, and body formatting only).
Here is menu.html:
<html>
<head>
<script language="JavaScript">
function go(){
URL = document.myForm.theURL.value;
parent.main.location=URL;
}
</script>
</head>
<body>
<form name="myForm">
<input type="text" name="theURL" size="50">
<input type="button" value="Go" onClick="go()">
</form>
</body>
</html>
I'm not sure why this happens, but you can use this workaround:
function go(){
var URL = document.getElementById('myForm').theURL.value;
if (URL) {
url = URL.split('/');
if (url[url.length - 1].indexOf('index.htm') < 0) {
url[url.length] = 'index.htm';
URL = url.join('/');
}
} else {return;}
parent.main.location.href = URL;
// or: parent.main.contentWindow.location.href = URL;
}
To use this, you need to set id="myForm" to form element.