SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to reload the parent frame

    Sample parent code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Parent</title>
    </head>
    <body>
    <iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width="200" height="100"></iframe>
    </body>
    </html>
    See it in action:
    https://googledrive.com/host/0B5jOXz...m8/parent.html


    Sample child code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Child</title>
    </head>
    <body>
    <button onclick="myFunction();">Try it!</button>
    <script>
    function myFunction() {
    parent.location.reload();
    }
    </script>
    </body>
    </html>
    I have tried many methods offered in similar questions to no avail, such as:

    window.parent.location.reload();
    top.location.reload();
    etc.

    What am I missing and what's the right approach?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is way out of my comfort zone but I guess the issue is that you can't access the parent cross-domain. If both pages were on the same domain I believe it would work. The issue is probably compounded due to one page being on https also.

    You can send messages between pages cross domain if you have access to both pages but its quite complicated and above my skill level but I managed to get this example to work. The routine was taken from here and I originally used it to automatically resize the iframe based on its content in a fluid design..

    I'm not sure if that will work on https sites though as there may be other restrictions.

    Perhaps one of the js experts can chime in here

  3. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    This is way out of my comfort zone but I guess the issue is that you can't access the parent cross-domain. If both pages were on the same domain I believe it would work. The issue is probably compounded due to one page being on https also.
    Dear Paul,

    You seem to be right and that's what I guessed. Then I need to change my question: How to reload the parent frame that's located on a different domain?

    By the way, happy new year and thank you very much for your continuing support, tireless help, and wealth of knowledge!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    Dear Paul,

    You seem to be right and that's what I guessed. Then I need to change my question: How to reload the parent frame that's located on a different domain?
    My example above should work on different domains as long as they aren't https. I'm not sure if it can be made to work across https protocols though.

    I think we need some help from a js expert in here now like @Pullo (or anyone else)

    By the way, happy new year and thank you very much for your continuing support, tireless help, and wealth of knowledge!
    Happy new year to you also

  5. #5
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    (...) I'm not sure if it can be made to work across https protocols though.
    I think we need some help from a js expert in here now like @Pullo (or anyone else)
    Ah, I'm not the wanted js expert.
    As experimentalist I pasted a https-page from some different domain in the iframe-src of the example, and it worked.

    But ... the main page is not https, it's an insecure http-page. I've read:

    An attacker could manipulate the html-file and replace the https-src with his own file (could be also https, and could be made identical to your https/payment file), so the guileless visitor will be donating all his/her account data to the hacker.
    I think both files have to be https!

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Maybe a workaround is possible (depending on the layout and other functionalities), if you turn both pages upside down:
    • make the iframe-page the main page
    • make the main page the iframe-page

    Then no difficult cross-domain scripting for a parent page is needed, just a simple script to reload the iframe.


    BTW: Why an iframe is needed? Is it not a better solution to insert the iframe part with a php-include? Then everything is on 1 page, and no difficulties can arise. Eventually some of the main content can be changed dynamically if something happens in the "iframe" part.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Paul is correct that your first attempt causes an error as it tries to access an iframe on a different domain.

    You can see this if you look in the error console when you click the try it button.

    Code:
    Uncaught SecurityError: Blocked a frame with origin "https://dl.dropboxusercontent.com" from accessing a frame with origin "https://googledrive.com". Protocols, domains, and ports must match.
    In addition to the fine solutions you have received thus far, here's what I would do:

    If you own both domains:
    I would use HTML5's Window.postMessage API which allows you to send messages from parent to iframe and the other way round.
    Here's the docs: https://developer.mozilla.org/en-US/...ow.postMessage
    This is basically what Paul is doing, but you don't really need to use jQuery for this.

    If you don't own one of the domains:
    Forget it.

    If one of the domains uses https:
    As Francky correctly says, it is bad practice to embed an iframe with content served over HTTPS within a page served over plain HTTP (or mix content).
    However, I am no security expert, so I would ask for further advice in the Web Security forum.

    If you have control of both domains, this should work for you.
    I got the main inspiration here: http://stackoverflow.com/questions/8...hild-to-parent

    Parent: a.html

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Parent</title>
      </head>
    
      <body>
        <h1>I'm the parent </h1>
        <p id="progressIndicator">Waiting </p>
    
        <iframe src="path/to/iframe/here" id="iframe"></iframe>
    
        <script>
          var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
          var eventer = window[eventMethod];
          var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    
          // Listen to message from child window
          eventer(messageEvent,function(e) {
            if(e.origin == "http://www.iframe-domain.com"){
              alert("Received following message: " + e.data);
              location.reload();   
            } else {
              alert("error");
            }
          },false);
    
          var progressIndicator = document.getElementById("progressIndicator");
          window.setInterval(function(){
            progressIndicator.innerHTML += ".";
          }, 1000);
        </script>
      </body>
    </html>
    Child: b.html

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Child</title>
      </head>
    
      <body>
        <h2>I'm the child</h2>
    
        <form name="form">  
          <input type="submit" value="Reload parent"/>
        </form>
    
        <script>
          document.forms.form.onsubmit = function() {
            parent.postMessage("reloadWindow","*");
            return false;
          }
        </script>
      </body>
    </html>
    As you can see, I added a progress indicator just to prove that the page gets reloaded.

    HTH
    Last edited by Pullo; Jan 2, 2014 at 06:29. Reason: Removed link to demo

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    That's a good idea Francky.
    Nice one


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •