How can I do like for example, if we click over the label text, I want to toggle (check/uncheck) the checkbox of box.html page.
I've included the box.html page, with an iframe.
Index.html
<html>
<body>
<iframe src="box.html" height="25px" width="100px">
</iframe>
<label for="box">
checkbox
</label>
</body>
</html>
Box.html:
<html>
<body>
<input type="checkbox" id="box">
</body>
</html>
First thing, both the pages (Main and iframe) should be from the same domain, else it will throw cross domain error.
1st Page
<html><head>
<script>
function delegate() {
var iframe = document.getElementById("myIframe");
iframe.contentWindow.change();
}
</script></head><body>
<iframe id="myIframe" src="box.html" height="25px" width="100px"></iframe>
<label for="box" onclick="delegate()">
Click Here.
</label></body></html>
2nd Page
<html><head>
<script>
function change() {
document.getElementById('box').checked = !document.getElementById('box').checked;
}
</script></head><body>
<input type="checkbox" id="box"></body></html>
Related
Actually what i want,when submit the from that request go to this http://api.brightcove.com/services/post , i set target element of form to iframe.Then response is go to iframe correctly its ok.Problem is ,I want to get body content of iframe using javascript function but it is not working.This is my source
<html>
<head>
<script>
function getIframe(){
var iframe = document.getElementById('postFrame');
var bodyC = iframe.contentDocument.body.innerHTML;
alert(bodyC);
}
</script>
</head >
<body >
<form action="http://api.brightcove.com/services/post" method="post" target='postFrame'>
<input type="hidden" name='JSON' value="test"/>
<button type="submit" >Submit</button>
<button onclick="getIframe()" type="button">Check Iframe Result</button>
</form>
<iframe id="postFrame" name="postFrame" style="width:100%;border:none" ></iframe>
</body>
</html>
For example in page1.html I have:
<input type="radio" id="id1" onclick="change()">Radio Button</input>
In page2.html I have :
Link
Clicking the radio button on page1.html should change the value of the href attribute in page2.html.
Javascript (js_file.js):
function change()
{
if(document.getElementById(id1).checked)
{
document.getElementById(id2).href="page4.html";
}
}
This code will not work since id1 and id2 do not exist on the same page.
Is there any method where 2 or more html pages can simultaneously access a javascript function?
Assuming I have included this :
<script src="js_file.js" type="text/javascript" />
in both the HTML pages within the head tag.
I am trying to avoid server side programming as it is an embedded web server and can only be programmed in C language.
Try this on for size.
Page1.html
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
var urlRadios = document.getElementsByName('urlSelector');
var i, n = urlRadios.length;
for (i=0; i<n; i++)
urlRadios[i].addEventListener('click', onUrlRadioChange, false);
}
function onUrlRadioChange(evt)
{
localStorage.destUrl = this.getAttribute('dest');
localStorage.destTxt = this.getAttribute('msg');
}
</script>
<style>
</style>
</head>
<body>
<h3>Pick destination of link on page 2</h3>
<input type='radio' msg='No page selected' dest='none' checked name='urlSelector'>none</input>
<input type='radio' msg='Page 3' dest='page3.html' name='urlSelector'>page3.html</input>
<input type='radio' msg='Page 4' dest='page4.html' name='urlSelector'>page4.html</input>
<hr>
<a href='page2.html'>Page 2</a>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
if (localStorage.destUrl != 'none')
byId('tgtLink').href = localStorage.destUrl;
byId('tgtLink').innerHTML = localStorage.destTxt;
}
</script>
<style>
</style>
</head>
<body>
<h3>Destination was set by page 1</h3>
<a id='tgtLink'>Link</a>
</body>
</html>
The only way that you can do this is by passing data between pages using hidden HTML elements.
Page1
<input type="radio" name="radio1" id="radio1" onclick="change.js">Radio Button</input>
Page2
<input type="hidden" name="radio1" value="XXX">
Of course, you'll have to have Page1 upload the form to the server, and have the server generate Page2 with the hidden elements populated.
Another solution which might work if the structure of the sites allow this: window.opener
Let's say page 1 opens page 2 as a popup (so both windows are kept opened), then you could access everything from page 1 through window.opener.
You can even test this here. Open any link on this site (whithin the domain of stackoverflow, else that would be XSS) in a new window, then open the JavaScript console of that new window and enter: window.opener.document.title = "YAY!"
At least that's an easy way to avoid using local storage etc.
The site like this:
`--main.html
`--dialog.html
`--folder
`--iframe.html
and the code is here:
main.html:
<html>
<head>
<script type="text/javascript">
function testframe() {
var doc = document.getElementById("frame").contentWindow;
doc.show();
}
</script>
</head>
<body>
<iframe src="folder/iframe.html" id="frame"></iframe>
<br/>
<button onclick="testframe()">test</button>
</body>
</html>
dialog.html:
<html>
<head>
</head>
<body>
This is modal dialog!
</body>
</html>
iframe.html:
<html>
<head>
<script type="text/javascript">
function show() {
showModalDialog('../dialog.html');
}
</script>
</head>
<body>
this is ifram
<br />
<button onclick="show()">show dialog</button>
</body>
</html>
When I click the show dialog button in the ifram,it show the modal dialog correctly.
When I click the test button outside the ifram ,it show the modal dialog incorrectly.
How can I fix this when I click the test button outside the ifram to show the correct page in the dilog?
iframeDomElement.contentWindow.setTimeout(function() {
iframeDomElement.contentWindow.childFunc();
}, 0);
This hack will make the relative path relative to the child window. Works in firefox and chrome，but not in safari.
I am using an iFrame in my application. Let me give an example here.
I have main page as
<html>
<head>
<script src='jquery.js'></script>
<script>
function TestFunction()
{
var FirstName = $("#first_name").val();
alert(FirstName);
}
</script>
<head>
<body>
Enter First Name: <input type='text' size='20' id='first_name'><br />
<input type='button' value='Cilck' onclick='TestFunction();'><br />
<iframe id='test_iframe' src='test_iframe.htm' height='200' width='200'>
</iframe>
</body>
</html>
...and this works fine with alerting whatever is entered in textbox
But is it possible to invoke the same function in iframe that will alert the value present in textbox of the parent page?
Suppose test_iframe.htm code is like this
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
TestFunction(); // I know this wont work.. just an example
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
Can this be done ?
I believe this can be done with 'parent'
function IframeFunction()
{
parent.TestFunction();
}
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
parent.TestFunction(); // or top.TestFunction()
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
<a onclick="parent.abc();" href="#" >Call Me </a>
See Window.Parent
Returns a reference to the parent of the current window or subframe.
If a window does not have a parent, its parent property is a reference to itself.
When a window is loaded in an , , or , its parent is the window with the element embedding the window.
This answer is taken from stackoverflow
I have a page that contains a dynamically loaded <iframe>. This iframe contains a <form>.
When the user submits the <form>, a new page is loaded within the <iframe> saying Thanks.
Instead of using a second page, i want the parent page to show the Thanks message.
So basically i am in my <iframe>, and i want to call a function on the parent frame.
How can i do that ?
From an iframe, it is possible to call a function declared on the parent window using window.top.functionName(). But for this to work, both pages should be hosted on the same domain. They are subject to Same Origin Policy. That means if you want to test this example, you should use a server (wamp, xampp, etc..).
page.html (updated)
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
window.foo = function(){
alert('page 1 is executing this code');
}
$(function(){
$('body').append('<iframe src="iframeContent.html"></iframe>');
});
</script>
</head>
<body></body>
</html>
iframeContent.html
<html>
<head>
<title>Page 2</title>
</head>
<body>
i am the iframe. This is my button.
<button onclick="javascript:window.top.foo()">click me</button>
</body>
</html>
I've done a little example for you.
Here is the main page (index.html) containing the iframe
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<input type="hidden" id="infoFormPosted" value=0 />
<iframe src="./iframe.html"></iframe>
<div id="thanks" style="display:none;">
Thanks!
</div>
</body>
</html>
And here is the iframe (iframe.html):
<html>
<head>
<title>myIframe</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#infoForm").submit(function() {
//change the value of the top document input hidden to 1
$("#infoFormPosted", top.document).val(1);
});
// if the input hidden is set to 1
if($("#infoFormPosted", top.document).val() == 1){
// show the thanks div on the top document (not in the iframe)
$("#thanks", top.document).show();
}
});
</script>
</head>
<body>
<div id="anydiv">
<form id="infoForm" action="#" method="post">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
EDIT : An alternative is to create a function inside the main page and call it in the iframe using parent.nameOfTheFunction()
The main page (index.html)
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
showThanks = function(){
$("#thanks").show();
};
</script>
</head>
<body>
<input type="hidden" id="infoFormPosted" value=0 />
<iframe src="./iframe.html"></iframe>
<div id="thanks" style="display:none;">
Thanks!
</div>
</body>
</html>
The iframe (iframe.html):
<html>
<head>
<title>myIframe</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#infoForm").submit(function() {
//change the value of the top document input hidden to 1
$("#infoFormPosted", top.document).val(1);
});
// if the input hidden is set to 1
if($("#infoFormPosted", top.document).val() == 1){
// call showThanks function from the main frame
parent.showThanks();
}
});
</script>
</head>
<body>
<div id="anydiv">
<form id="infoForm" action="#" method="post">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>