SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    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,350
    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
    222
    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,350
    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
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    Maybe a workaround is possible (depending on the layout and other functionalities), if you turn both pages upside down:

    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.
    Thanks for the suggestions, but they don't work in my real site (parent frame) as it doesn't support JavaScript or PHP.

  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)
    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

  9. #9
    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)
    Quote Originally Posted by Rain Lover View Post
    Thanks for the suggestions, but they don't work in my real site (parent frame) as it doesn't support JavaScript or PHP.
    I'm a bit confused. What do you mean, your site doesn't support JavaScript?
    JavaScript is interpreted by a user's web browser and (in that respect at least) has nothing to do with your site.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    I'm a bit confused. What do you mean, your site doesn't support JavaScript?
    JavaScript is interpreted by a user's web browser and has nothing to do with your site.
    Many thanks for the answer and beautiful example. But like I said I cannot insert JavaScript in my site. Let me explain: my site is created in Google Sites and in Google Sites you're not allowed to use any scripting language in your page content area:
    http://en.wikipedia.org/wiki/Google_Sites#Limitations

    However, However, after a long search I just came up with a different approach:
    Code JavaScript:
    window.parent.location = document.referrer;

    Child:
    Code:
     <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Child</title>
    </head>
    <body>
    <button onclick="myFunction();">Try it!</button>
    <script>
    function myFunction() {
    window.parent.location = document.referrer;
    }
    </script>
    </body>
    </html>
    I wonder what you think. Is it a reliable solution?

  11. #11
    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,

    Quote Originally Posted by Rain Lover View Post
    Let me explain: my site is created in Google Sites and in Google Sites you're not allowed to use any scripting language in your page content area[/URL]
    Ah, ok. That makes much more sense in context.

    Quote Originally Posted by Rain Lover View Post
    However, However, after a long search I just came up with a different approach:
    Code JavaScript:
    window.parent.location = document.referrer;
    I wonder what you think. Is it a reliable solution?
    I think so.
    The only time it might break is if you have links within your iframe which allow you to navigate away from the original page, as only the first page loaded inside the iframe will have parent frame URI as document.referer.

    Saying that, if you don't have access to any scripting languages in your page, this definitely seems like your best bet.

    Thank you for taking the time to share your solution

  12. #12
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    The only time it might break is if you have links within your iframe which allow you to navigate away from the original page, as only the first page loaded inside the iframe will have parent frame URI as document.referer.
    Again a different approach!
    I'm thinking: why not just a normal "hard link" to the parent page instead of the window.parent.location = document.referrer; construction?
    To present the link as button the <input type="submit"> can be used.
    The only thing you need is a frame-escape on the main page.
    This is working after visiting 5073 pages inside the iframe, and afterwards coming back to the first one. And it's working too on the 5073 new pages in the iframe.

    • Test: test-parent-for-iframe.htm
      Added is a loading delay, so you can see what is happening at a reload.
      Tested in Firefox, Chrome, Opera, Safari, IE7 and IE11; testing results: positive.

    Remaining issue: the safety aspect, in case there are critical data to be send in the https-iframe inside the normal http-page.

  13. #13
    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

  14. #14
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    I'm thinking: why not just a normal "hard link" to the parent page instead of the window.parent.location = document.referrer; construction?
    Thank you very much for coming up with a cross-browser solution! But I'm afraid it doesn't work for me and here's why: actually I'm working on a Google gadget that should be used on different pages and by different users. Then the parent frame URL depends on the gadget user's webpage. In short, I cannot count on a fixed parent URL in my coding.


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
  •