We Keep Coding

Fill input field inside an iframe when link outside of iframe is clicked

I have been trying to get this to work for 2 weeks now but I am stumped on this which is probably very simple. I am new to js.
I have multiple links on a page along with a form embedded in an iframe. Same domain, same page, both using https. The form is from a form script and is embedded in the page using:
<div id="my_placeholder"
data-formurl="https://www.example.com/forms/embed.php?id=7777"
data-formheight="1268"
data-paddingbottom="10">
</div>
<script src="https://www.example.com/forms/js/jquery.min.js"></script>
<script src="https://www.example.com/forms/js/jquery.postmessage.min.js"></script>
<script src="https://www.example.com/forms/js/form_loader.js"></script>
Using that code it automatically puts the form in an iframe. The input field ID within the form i'd like to fill is #element_11
So far, I have the following code which works exactly as I'd like but the generic form code is not in an iframe
Link1
<br />
Link2
<br />
Link3
<form>
<input type="text" id="element_11" />
</form>
<script type="text/javascript">
function reply_click(element)
{
document.getElementById('element_11').value = element.getAttribute('data-filled-value');
}
</script>
How can I accomplish this? I have searched and searched but every post I've come across wants to target the iframe and "submit" the form or "close" the iframe or "fill in one form and have it go to another form in an iframe".

Use .contents() to access the contents of an iframe.
function reply_click(element)
{
$("#iframeID").contents().find("#element_11").val(element.dataset.filledValue);
}
Replace iframeID with the actual ID of the iframe.

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.

How to send the content of a textarea into a new window

I wanna know how do you send the content of the textarea into a new window by using the Window open() method.
heres is my little code:
HTML
<textarea name="textcode"></textarea>
<button type="submit" onclick="myFunction()">Open in New window</button>
Javascript
function myFunction() {
window.open("insert the new window path here");
}

use below code using jquery.
HTML
<textarea name="textcode" id="text"></textarea>
<button type="button" id="openwindow">Open in New window</button>
jquery
$(document).ready(function(){
$('#openwindow').click(function(){
var value = $('#text').val();
window.open('https://www.google.co.in/?#q='+value);
});
});
you can pass value as params.include path and params. you will get value of text area in query string .using PHP $_GET['param'] you will print data in new window.
using pure javascript
HTML
<textarea name="textcode" id="text"></textarea>
<button type="button" onclick="myFunction();">Open in New window</button>
javascript
function myFunction(){
var value = document.getElementById("text").value;
window.open('https://www.google.co.in/?#q='+value);
}

Why trying to send data between windows if you can have direct access to the content/DOM of the parent window? This will give you advantages when the content of your textarea is/can be changed. The "child page" will keep a reference to the page that opened it!
parent.html
<textarea id="mytext" name="textcode"></textarea>
<button type="submit" onclick="myFunction()">Open in New window</button>
<script>
function myFunction() {
//open popup/window on the same domain
window.open('newwindow.html','newwindow','width=350,height=350');
}
</script>
When the new window opens you can have access to it's parents DOM only if they are on the same domain.
In your newwindow.html you can access your textarea (or any other DOM element) with window.opener:
window.opener.document.getElementById("mytext").value
Like I said, this only works when your parent and child windows are on the same domain. You will run into "same-origin policy errors" when parent and child aren't in the same domain.
However! you can use Window.postMessage to safely pass data between windows that aren't on the same domain. This isn't supported that well in all browsers.
otherWindow.postMessage(message, targetOrigin, [transfer]);
You can find an example and additional information (like browser support etc) on the dev pages of mozilla here

jquery get offset() of element in iframe

I need to fetch the offset info for a submit button that is buried deep within an iframe in a div. I want to position another element adjacent to the submit button after the iframe is loaded. The iframe is loaded from the same origin as the containing page.
<div id="editBox">
<iframe id="ifr" src="mysource">
<html>
<head></head>
<body>
<form id="dataForm" enctype="" method="POST" action="">
<div>
<table> some form elements </table>
<button id="submitButton" onclick="" type="submit">Save to file</button>
I've tried
$('#editBox').contents().find('#submitButton').offset();
and
$('#ifr').contents().find('#submitButton').offset()
But both return undefined.
I've also wrapped the .contents statements in a setTimeout to determine if the problem is that I'm checking before the iframe is loaded. (if that had worked I'd add a loaded event handler), but no change, result still undefined.
How can I get the position info I need?

Wrap your code in a load() function for the iframe. This works just like the document ready function, or window load function:
$("#ifr").on("load", function(){
var offset = $(this).contents().find('#submitButton').offset();
});

call iframe function from parent window

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/