I have a page like this...
<div>
<iframe id="mainContent">
<iframe id="littleBox">
</div>
and I want to do this...
$(".someButton").live('click', function() {
alert(/*The URL That the Main Frame is ON*/);
});
I found this: $("#mainFrame").get(0).location.href, but it doesnt work...
Also, I need it to return the current url, so if someone navigates around it should return the current page they are on.
Okay so you mean you have to access the URL of the parent from the child iframe?
$("#mainFrame").get(0).contentWindow.location
Does iframe.src not work? Or, are you trying to get the parent document? In that case, you can just use parent.
As Azmisov says iframe.src does the trick
<head runat="server">
<title>iframe Test</title>
<script type="text/javascript">
function ShowURLs() {
var control = document.getElementById("mainContent");
alert("iframe source = " + control.src);
alert("this page = " + location.href);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="someButton" value="Click Me" onclick="ShowURLs()" />
<div>
<iframe id="mainContent" src="Test.aspx" />
<iframe id="littleBox" />
</div>
</div>
</form>
</body>
document.getElementById('mainContent').contentWindow.location.href
Related
I must not understand how to change the content of my <div> tag.
Here is my html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="simple.js"></script>
<title>simple</title>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is my .js file:
function myFunction() {
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
}
When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(
What am I doing wrong here.
Update: Thanks everyone! Here is what I have working now:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" id="myurl" size="100" /></p>
</form>
<button id='clickme'>Click me</button>
<button id='noclickme'>No Click me</button>
</div>
<script src="simple.js"></script>
</body>
</html>
My .js file:
function say_something(s) {
document.getElementById("results").innerHTML = s;
}
document.getElementById("clickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Goodbye [" + url + "]");
});
A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
});
Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.
Example jsFiddle
The reason is the form label.
when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
<script src="simple.js"></script>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
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.
I want to ask you how to redirect parent page to a certain url from a pup up page? I tried several options as parent or opener and nothing is working. Please help me to understand what is wrong.
here is the code i used:
<html>
<head>
<script>
function openWin(){
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>This is 'myWindow'</p> <button onclick=\"window.opener.location.href = ='http://www.google.com'; window.close();\">refresh</button>");
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="Open window" onclick="openWin()" />
</body>
</html>
You have an error in your code. Should be
myWindow.document.write("<p>This is 'myWindow'</p> <button onclick=\"window.opener.location.href = 'http://www.google.com'; window.close();\">refresh</button>");
i.e., remove the extra = before 'http://www.google.com'.
I have an iframe in my page and how can i get a the value of t text box in the frame from my parent page on a button click?
here is my code
<div>
<iframe src="test.html" >
<input type=text id="parent_text">
<input type="button">
</div>
here is d test.html
<input type="text" id="frame_text">
thanks
Something like this:
var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var input = innerDoc.getElementById('frame_text');
First you get the the iframe.
Then you get the first valid dom document from inside the iframe.
And finaly get the input box.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function getIframeText() {
var iframe0 = document.getElementById("iframe0");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("frame_text");
alert(inputIframe.value);
}
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe0" src="test.html" >
<input type=text id="parent_text">
</div>
</body>
</html>
If you have Div/ input as follows in one Iframe
<iframe id="ifrmReportViewer" name="ifrmReportViewer" frameborder="0" width="980"
<div id="EndLetterSequenceNoToShow" runat="server"> 11441551 </div> Or
<input id="txtSequence" type="text" value="10500101" />
<form id="form1" runat="server">
<div style="clear: both; width: 998px; margin: 0 auto;" id="divInnerForm">
Some Text
</div>
</form>
</iframe>
Then you can find the text of those Div using the following code
var iContentBody = $("#ifrmReportViewer").contents().find("body");
var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text();
var txtSequence = iContentBody.find("#txtSequence").val();
var divInnerFormText = iContentBody.find("#divInnerForm").text();
I hope this will help someone.
$('iframe').contents().find('#mytextbox').val("myvalue");
Here is parent page code (I mean main page call to iframe):
<script>
function frameClick(string){
var name=string;
document.getElementById("parent_text")=name;
}
</script>
<div>
<iframe src="test.html" id="frame1">
<input type=text id="parent_text">
</div>
Here is iframe code(test.html):
<form method="post" action="" id='frm1' >
<input type="text" id="frame_text">
<input type="button" id="btm1" name="hangup" onclick="parent.frameClick(this.form.frame_text.value);" value="submit">
</form>
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>