How to add a javascript function inside the body of iframe

Question

i have a html file with iframe and button in it, Is there a way to add a javascript function inside the body of iframe after I click the button?. Here is my code. Thanks

<html>
<head>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script>
        function callMe() { 
            var frame = $('iframe'),
            contents = frame.contents(),
            body = contents.find('body');

    var script2   = document.createElement("script");
    script2.type  = "text/javascript";
    script2.text  = " function setEmployeeId(){var employeeId = 0;};"            
    $(body).append(script2);
        };      
    </script>



    <title>sample</title>
</head>
<body>
        <iframe src="page2.html">           
        </iframe>
    <button onClick="callMe();">click</button>
</body>
</html>

The result I want is to be like this.

<html>
<head>  

    <title>sample</title>
</head>
<body>
        <iframe>
<html>
<head>  
    <title></title>
</head>
<body>
   <script>
function setemployeeId() {
var employeeId = 0;
};
</script>
</body>
</html> 
</iframe>       
</body>
</html>

@AndrewBarber i'd assume so considering the `src` is relative "page2.html". — zamnuts, Oct 29 '13 at 03:18
You may find your answer here... http://stackoverflow.com/questions/1591135/why-does-appending-a-script-to-a-dynamically-created-iframe-seem-to-run-the — gts101, Oct 29 '13 at 03:20

score 2 · Answer 1 · edited May 23 '17 at 10:25

Hopefully you can clarify a few things for me as we go, but I think I have some bad news for you.

Any content that is loaded in an iframe cannot truly edited unless you own the page that is being loaded, in that case you can just bake in whatever you need into the loaded page.

HOWEVER!

You can still access elements in the iframe by using the contentWindow attribute. That is all laid out for you here: How to pick element inside iframe using document.getElementById

Once you've got the element you want to work with, you can create a function in the parent window and then add a call to the parent window's function using window.parent. That's outlined here: Calling a parent window function from an iframe

So if you wanted to make a button in an iframe alter the contents of the iframe you could use

var elem = document.getElementById('myframe1').contentWindow.document.getElementById('myButton')

and then create a function in your parent window

function changeIt(){
    document.getElementById('thingToChangeInIframe_ItsIDintheIframe').property = 'value';
}

and append it to the button with the code

elem.setAttribute('onclick', 'changeIt();');

If you have any clarifications to what you need just comment and we'll work those out. I'm sorry this doesn't use much jQuery but that's not really my forte, but I think the pure javascript is relatively self explanatory.

EDIT: I should clarify that if the iframe is on another domain then your options are pretty much all eliminated. For security reasons you can't mess with the settings on other people's pages when you load them in an iframe.

For cross-browser support it's still a good idea to use `var y=(x.contentWindow || x.contentDocument); if (y.document)y=y.document;` as seen on [w3schools](http://www.w3schools.com/jsref/prop_frame_contentwindow.asp) — Tim Vermaelen, Oct 29 '13 at 03:29

How to add a javascript function inside the body of iframe

1 Answers1