Load an external page into overlay

Question

I face a problem in the following code which is used to load an external page into overlay when user clicks a button

        <!DOCTYPE html>
        <html>
            <head>
                <title>jQuery Tools standalone demo</title>

                <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>


                <style>

                    /* the overlayed element */
                    .apple_overlay {

                        /* initially overlay is hidden */
                        display:none;

                        /* growing background image */
                        background-image:url(images/white.png);

                        /*
                          width after the growing animation finishes
                          height is automatically calculated
                        */
                        width:640px;

                        /* some padding to layout nested elements nicely  */
                        padding:35px;

                        /* a little styling */
                        font-size:11px;
                    }

                    /* default close button positioned on upper right corner */
                    .apple_overlay .close {
                        background-image:url(images/close.png);
                        position:absolute; right:5px; top:5px;
                        cursor:pointer;
                        height:35px;
                        width:35px;
                    }
                </style>
            </head>

            <body>
                <!-- external page is given in the href attribute (as it should be) -->
                <a href="http://www.facebook.com/" rel="#overlay" style="text-decoration:none">
                    <!-- remember that you can use any element inside the trigger -->
                    <button type="button">Show external page in overlay</button>
                </a>

                <!-- another link. uses the same overlay -->
                <a href="http://jquerytools.org/demos/overlay/external-content.htm" rel="#overlay" style="text-decoration:none">
                    <button type="button">Show another page</button>
                </a>

                <!-- overlayed element -->
                <div class="apple_overlay" id="overlay">
                    <!-- the external content is loaded inside this tag -->
                    <div class="contentWrap"></div>
                </div>

                <!-- make all links with the 'rel' attribute open overlays -->
                <script>
                    $(function() {

                        // if the function argument is given to overlay,
                        // it is assumed to be the onBeforeLoad event listener
                        $("a[rel]").overlay({

                            mask: 'darkred',
                            effect: 'apple',

                            onBeforeLoad: function() {

                                // grab wrapper element inside content
                                var wrap = this.getOverlay().find(".contentWrap");

                                // load the page specified in the trigger
                                wrap.load(this.getTrigger().attr("href"));
                            }

                        });
                    });
                </script>
            </body>
        </html>

this code is taken from http://jquerytools.org/demos/overlay/external.html any idea please?

score 2 · Accepted Answer · answered Apr 13 '12 at 00:49

2

From jQuery documentation:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

answered Apr 13 '12 at 00:49

Ilia Frenkel

1,969
13
19

This is error i got it from chrome console XMLHttpRequest cannot load http://www.facebook.com/. Origin null is not allowed by Access-Control-Allow-Origin. what should i do to retrieve data successfully? – user1212009 Apr 13 '12 at 00:54
You cannot load pages from other sites using AJAX. It is a security feature. – Ilia Frenkel Apr 13 '12 at 00:59
@llia: I appreciate your efforts for helping me, thanks you llia but Does your answer mean that there is no solution for my code?? – user1212009 Apr 13 '12 at 01:10
Well, you can use `iframe` or you can use server side code that will go to external web site, load the page and pass it to you (kind of proxy). – Ilia Frenkel Apr 13 '12 at 01:13
There are some techniques described here - http://usejquery.com/posts/the-jquery-cross-domain-ajax-guide – Ilia Frenkel Apr 13 '12 at 02:32
@llia: when i used iframe it works good, but there are some websites such as youtube and stackoverflow refused to be loaded in iframe and i don't the know the reason for this. – user1212009 Apr 17 '12 at 00:35

Load an external page into overlay

1 Answers1