load and ajax not working as alternative to iframe...giving error js disabled

Question

i'm loading a site "B", which is using canvas, into site 'A'. iframe was an easy option and is working great but i want to do it using jQuery. I tried using ".load" and "$.ajax" the site "B" is giving error javascript is disabled on your browser...below is the code...

if i directly load that site into another window it works well..I do not want to use iframe .. i need to load it in some div

    using .load...
    $("#dataLoader").load('http://www.xyz.com');

    and using ajax...
    $.ajax({
         url: "http://www.xyz.com",
        cache: false
         }).done(function( html ) {
                         console.log(html)
                       $("#dataLoader").append(html);
                    });

Answer 1

This cannot be done without an iFrame. iFrames are specifically built to load pages. ajax cannot be used for content-injection from cross domains. There are many alternatives/fixes to rectify this :

• As the previous answer has recommended, set the url attribute of the iframe to the target page and be done with it.
• If the url isnt dynamic, just set the src attribute within the HTML itself. No jQuery would be needed then.
• You could use jsop if cors is supported by the server on which xyz.com is hosted on.
• If you're still insistent on using ajax and jquery for this, use this extra mod to the ajax library : http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
• There's one last (and more complicated) way to achive this. You could send a request to your server and make the server talk to the url and then make your server return it to you. You could use ajax to get that out.

Please look at these links for more clarity on this :

• Ajax/jQuery - Load webpage content into a div on page load?
• http://davescoolblog.blogspot.in/2012/02/client-side-cross-domain-data-yql-hack.html
• Cross-Domain Requests with jQuery

Answer 2

Just change the src attribute of the iframe. Something like

$("#frame").attr("src", url);