如何从.load（）的页面访问CSS属性？

Question

I want to load an entire website in to my website. I have been able to do this with $(#preview).load("index.php") into my <div id="preview"></div> . What i have troubles accessing here is the background image which is a property of body. I tried making a div tag with a background-image attribute but when i removed the image from my body tag it didnt behave like i wanted to (was not filling the entire space).

My question is this. How can i access something from index.php that can let me either preview the site correctly or copy the attribute from somewhere into the preview background-image attribute?

my code now looks like this, after some extensive try-and-error (more like error-and-error and its getting more and more messy)

    $(document).ready(
        function() {    
            $("#check").click(
                function() {
                    var bgd;
                    $("#preview").load("index.php", 
                        function () {
                            bgd = $("#bg").css("background-image");
                        }
                    );
                    $("#preview").style.backgroundImage(bgd);
                }
            );
        }
    );

Where bg is the id of the div which works as a "substitute" body tag in index.php (aka with the same attributes as body)

Im either far from it, or ridiculously close. Thanks for every piece of advice i can get.

Answer 1

   $(document).ready(
        function() {    
            $("#check").click(
                function() {
                    $.ajax({
                             url: 'index.php',
                             success: function(data){
                                 data = $('data').html();
                                 $('#preview').html(data);
                                 bg = $('data').find('#bg').css('background-image');
                                 $('#preview').css('background-image',bg);
                             }
                        });

                }
            );
        }
    );

Answer 2

Two problems here. One with how you're accessing style properties and the other has to do with the asynchronous behavior of load() .

Style problem

You'll need to use $("#preview").css('background-image',bgd) . The first method you were using could still be kept around by accessing the non-jQuery wrapped element, like so:

$("#preview")[0].style.backgroundImage(bgd);

Async problem

The second issue is that .load() is an asynchronous call that returns immediately . The next line of code gets executed and bdg is (most likely) still undefined. Then when load() completes, the success handler gets executed and bdg gets set to the background of the loaded page, but it's too late!

Moving the $("#preview").css('background-image',bgd) into the success handler will rectify that problem:

   $(document).ready(
        function() {    
            $("#check").click(
                function() {
                    var bgd;
                    $("#preview").load("index.php", 
                        function () {
                            bgd = $("#bg").css("background-image");
                            $("#preview").css('background-image',bgd);
                        }
                    );
                }
            );
        }
    );