call iframe function from parent window - javascript

How to call a javascript function in ifram from parent window.
i have a jsp page which contains an iframe.
jsp page is served by "a.yenama.net" server and iframe is served "b.yenama.net" server.
<iframe width="1200" height="640" name="data" id="dataId" >
</iframe>
<br/>
<input type="button" name="data" value="Save data" onclick="callSaveData();" />
tried below code from parent jsp page and recieved permission denied error in IE
window.frames['data'].callData();
also tried
document.getElementById('dataId').contentWindow.callData(); //didn't work
Function in iframe
window.callData = function(){
alert('Iframe function');
}
your help is truly appreciated.

you can do that by declaring your function in a common .js file
Therefore, you can access your function from wherever you want.
Have a nice day

i would suggest you to use jquery.load method instead of iframe to load your second page in a div of first page and then you can call any methods from both the pages
$('#result').load('PageWhichYouAreOpeningInIFrame.html');
or if you still wants to go with IFrame then you can use:
Invoking JavaScript code in an iframe from the parent page
http://api.jquery.com/load/

Related

PHP Redirect breaking iframe communication with parent

Can't seem to find anyone to figure this out. Just trying to get <iframe> BTN to talk to parent.
Simple problem, need to get a button inside an <iframe> to call function on main.html.
The setup is as follows:
main.html has <iframe> with products.php inside.
Products.php has button that loads confirmation.php
Confirmation.php has the BUTTON we need to call function on parent.
all files are on the same server/domain
The traditional method of button inside products.php changing src on main to confirmation.php works as expected.
The problem is happening here: On products.php the way it loads the confirmation page is with this:
private $base_url = "https://xxxxxxxx.com/";
$returnURL = $this->base_url . "confirmation.php";
Products page <form> submission calls this PHP. This action is somehow embedding the confirmation page, or appending it in a way it can't communicate with parent.
Button & function on confirmation.php:
<button type="button" onClick="test()">BACK</button>
<script>
function test() {
parent.mainTest();
}
</script>
All of the below have been tested in confirmation page func and failed.
parent.mainTest();
window.parent.mainTest();
document.parent.mainTest();
parent.document.getElementById('iframe1_id').src = "iframeTest.php";
window.parent.frames["iframe1"]
Script on main.html:
<script>
function test (){
alert("Worked");
}
</script>
<iframe src="products.php" id="iframe1_id" name="iframe1"></iframe>

How to load a 'POST' type page into an iframe in Ember?

I have an old JSP page in my project. I need to include this page into my new page, where my new UI side is complete EmberJS.
Things that I have tried
I got the rendered HTML from JSP using an ajax call and try to render with {{{ var }}} handlebar, But there are lots of scripts inside the page. They are not getting parsed or executed.
How can I load the page into an iframe? The page is POST type.
You can create a hidden form that point the target to the iframe, then trigger the click() event on the hidden submit button when document loaded.
For Example
<form action="YOUR_JSP_URL" method="post" target="myIframe">
<input id="postToIframeBtn" style="display: none" type="submit" value=" " />
</form>
<iframe name="myIframe" src=""></iframe>
<script>
document.getElementById("postToIframeBtn").click();
</script>
Short answer, try to insert them into DOM inside components didInsertElement hook using jQuery.
Do not use {{{}}} it only work with HTML inserting.

Embed (iframe or object) and Modify (jQuery) webpage

I'm simply trying to load another webpage in my webpage using the object tag or iframe. Then, I would like to remove some element of the loaded page with jQuery.
Here is my code
<div>
<object type="text/html" data="http://ebird.org/ebird/map/eurtre1" width="100%" height="400px" id="eurtre1">
</object>
</div>
<script>
jQuery( window ).load(function() {
jQuery('#map-sidebar').remove();
});
</script>
And, as you guess, it is not working...
I have tried:
jQuery('#eurtre1').contents().find('#map-sidebar')
and
jQuery('#eurtre1')[0].contentDocument.children
The wired thing is that on my browser, I can do it in the console, once I've selected the inside of the object...
Any idea ?
Here's a link to a similar question:
how to access an iframe and affect it with jQuery
Basically you can't due to Javascript same-origin policy but if you have access to the loaded content in the iframe you could use window.postMessage
You could also add a parameter to the iframe's src tag to post a message, something like this:
<iframe src="http://www.example.com?hideElement=true"></iframe>
Again you will have to have access the content of the iframe to check the param and execute your code.

Highlight words on a page from an iframe embedded on that page

I'm trying to make it possible to highlight some words on the page where my iframe with a search field is embedded.
The idea is that a user enters the search terms inside the iframe and the iframe sends a command to highlight those words on the page where it's embedded.
I can find how to reload the page from the iframe - but how do I perform some actions on that page without reloading it - triggering those actions from the iframe?
Or should I embed the form using JavaScript to make it easier?
Thanks!
You are not allowed to do this because of same-origin policy. Instead load the contents of the iframe using JavaScript, or instead reload the iframe with the query given as a parameter to the URL.
iframe example:
// base url
var url = "http://myhomepage.com?q="
$("#button").click(function(){
// get search keyword
var key = $("#search").val();
// get iframe reference and update its source
var iframe = $("#iframe");
iframe.attr('src',url+key);
});
<input type="text" id="search" />
<input type="button" id="button" value="go!"><br />
<iframe id="iframe" src="http://myhomepage.com" />

Accessing element inside iFrame returning null

I have a form that posts to an iFrame. The website inside the iFrame is something I have no control over. However I would like to set the display of a few images inside the iframe to "none".
<form id="testForm" method="post" target="testFrame">
<input type="hidden" name="RequestXML" ID="RequestXML" value="<Request><RedirectURL>Account/TokenRequest</RedirectURL></Request>"
</form>
<iframe id="testFrame" name="testFrame" frameborder="0" style="width:1000px;height:500px"> </iframe>
Here is my script at the top of the page:
<script type="text/javascript">
$(function () {
$("#testForm").attr("action", "http://externalwebsite.aspx");
$('#testForm').submit();
var iframe = document.getElementById('testFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
//alert($("#testFrame").contents().find("body").html());
//alert(innerDoc.innerHTML);
});
</script>
Both my alerts return null in Chrome, IE and firefox. What is the best way to access the elements inside that iframe. (in chrome i dont even see the html of that website when I try to do "inspect element" and view the html)
By the way I am doing all this in a MVC4 project
Assuming this is not a cross-domain issue, try:
var body = $('#testFrame').contents().find('body');
Since this cross domain you have two options.
if you have access to the iframe code, then you can place XDM code in there, maybe easyXDM would help.
Or
you have to go server side and get your php/asp.net etc backend to go get the page and get what data it needs.

Categories