1

Well, I have my radio elements that update an iFrame with js code; and that works fine.

Then I have my button below that creates an iFrame in a HTML Division that contains a bunch o' buttons in a list, my aim is to click one of these buttons in the iFrame then have that button to update the above iFrame (the one controlled by the radio's).

How is this possible, can anyone help me? Thanks in advance.

Note: I've tried using <link rel="import" href="parentpage.html"> to import its ID's (if it does that?) then tried using JS to update it that way, to no avail.

What it looks like (layout wise)!layout

Improve this question
3
  • You can't access elements of other iframes, but you could load data via ajax for example, or make an refreshing system which checks a database every n seconds to see which of the buttons is currently pressed. Commented Jul 21, 2014 at 19:56
  • Looks like i was wrong, I found a way to do this without ajax, see my answer below :) Commented Jul 21, 2014 at 20:05
  • Is there a way to do this with PHP? I'm inexperienced with PHP, and I am just curious :) Commented Jul 22, 2014 at 10:40

2 Answers 2

Reset to default
1

Assuming all the frames are in the same domain, this can be done like this:

<html>
    <head>
        <title>Main Page</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript">
             var change_iframe1_src = function(new_src) {
                 $("#iframe1").attr('src', new_src);
             }
        </script>
    </head>

    <body>
        <!-- frame for which we will change src attribute -->
        <iframe id="iframe1" src="" width="400" height="200" border="1"></iframe>        
        <!-- frame which includes your iframe2 with the buttons-->
        <iframe src="iframe.html" width="200" height="200" border="1"></iframe>
    </body>
</html>

Now in the iframe2 file attach a click handler for your buttons that should change the src attribute of the iframe1 by calling a function defined in the main page.

Example:

<html>
<head>
    <title>iFrame 2</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("button").click(function(e) {
                e.preventDefault();
                // call function in a parent frame - IMPORTANT LINE BELOW :)
                parent.window.change_iframe1_src(this.rel);
            })
        })
    </script>
</head>
<body>
    <button rel="iframe3.html">Change iframe src to iframe3.html</button>
    <button rel="iframe4.html">Change iframe src to iframe4.html</button>
</body>

The links in the iframe 2 page call the function which is defined in the parent window (the main page / the window which embeded the iframe2 page itself). That function (change_iframe1_src in this example) takes one argument which is a new url. The src attribute of the frame #iframe1 (your first frame) will be changed to this url.

Again, this works as long as all the frames are in the same domain.

Hope it helped :) Source

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

A simple way to do so is to get the button inside the iframe and set the event onclick like this

$(document.getElementById('iFrame2').contentWindow.document.getElementById("iFrame2Button")).click
   (function () 
   { 
          $("#iFrame1").attr('src','tests.php'); 
   })
Improve this answer

8 Comments

With this method, it seems to just refresh the iFrame containing the buttons and not replace the frame that I want to changed... Hm. Thanks anyway :)
is seems to refresh the iFrame containing the buttons if you change the src attribute to the same url of the iframe. and don't be confused by the ids ( iFrame2 , iFrame1 , iFrame2Button )
If you don't mind, could you elaborate further please:)
Let's say you want to change the url of iFrame1, it's id should be id="iFrame1" , the iframe 2 contains a button , the id of the iframe 2 should be id="iFrame2" and the id of the button inside iframe2 should be id="iFrame2Button" ... now the code I posted will work perfectly, you just have to change test.php on $("#iFrame1").attr('src','tests.php'); by the url of the page that your iFrame1 will include.
$(document.getElementById("iframe2").contentWindow.document.getElementById("iframe2button")).click (function () { $("#iframe1").attr("src", url); }); Is what I have :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.