trouble with dynamic async iframe

Question

I'm trying to use the Dynamic Async iFrame method, but my code isn't working and I'm confused about what I'm doing wrong. The iFrame itself is loading, but it isn't showing the expected web page. See what I mean.

Here is my code. What am I doing wrong?

<script>
    (function(d){
        var iframe = d.body.appendChild(d.createElement('iframe')),
            doc = iframe.contentWindow.document;

        // style the iframe with some CSS
        iframe.style.cssText = "width:900px;height:600px;";

        doc.open().write('<body onload="' + 
            'var d = document;d.getElementsByTagName(\'head\')[0].' + 
            'appendChild(d.createElement(\'script\')).src' + 
            '=\'http://www.uab.edu/dining/locations\'">');

        doc.close(); //iframe onload event happens

    })(document);
</script>

EDIT: Solution Code

<%= javascript_tag do %>
        $(window).load( function(){
            window.map = '<%= j @college.map.html_safe %>';
            window.street_view = '<%= j @college.street_view.html_safe %>';
            window.food = '<%= j @college.food.html_safe %>';
            window.housing = '<%= j @college.housing.html_safe %>';
            window.weather = '<%= j @college.weather.html_safe %>';
            $('#map').html(map);
            $('#street_view').html(street_view);
            $('#food_iframe').html(food);
            $('#housing_iframe').html(housing);
            $('#weather_section').html(weather);
        });
    <% end %>

what are trying to load? "uab.edu/dining/locations" is not a javascript file — Michael B.
– Michael B., Commented Sep 10, 2013 at 0:51
seems like it's a premature and unstable technique, i try this code in Google Chrome 29 and nothing happens — jasonslyvia
– jasonslyvia, Commented Sep 10, 2013 at 0:51
err.. I can't get a peep out of it in any browsers and his example on his site doesn't work, lmao. Have you considered fancybox. — Chris
– Chris, Commented Sep 10, 2013 at 0:55
@MichaelB. I'm trying to load this web page: uab.edu/dining/locations. — Adam Zerner
– Adam Zerner, Commented Sep 10, 2013 at 1:54
@Chris is fancyBox just for images, or could it be for iFrames too? — Adam Zerner
– Adam Zerner, Commented Sep 10, 2013 at 1:56

Michael B. · Accepted Answer · 2013-09-10 04:35:31Z

1

try this jquery to load iframe when Dom is ready

$(document).ready( function(){
   $('#placeholder').html('<iframe src=""></iframe>');
})

assuming you have some place holder with ID=placeholder..

or when all is loaded (including images)

$(window).load( function(){
   $('#placeholder').html('<iframe src=""></iframe>');
})

answered Sep 10, 2013 at 4:35

Michael B.

2,8091 gold badge17 silver badges18 bronze badges

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

1 Comment

Adam Zerner Over a year ago

Thanks! I used your second bit of code, and it does what I wanted it to do. I posted the code I used to anyone who's interested as an edit to the question.

Collectives™ on Stack Overflow

trouble with dynamic async iframe

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related