CODEWITHSUNDEEP
jqueryhtmlcssiframe
John Smith
John Smith

Reputation: 6197

Moving body to IFRAME spoils the inner links

I copy the whole HTML to an IFRAME:

var h = $('html')[0].outerHTML;
$('body').append('<iframe width="300" height="300" id="someId"></iframe>');
$('#someId').load(function() {
    $('#someId').contents().find('html').html(h);
    alert($('#someId').contents().find('html')[0].outerHTML);
});

this works so far, but the images/css, other links gets broken. The HTML looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<base href="/" />
<link rel="stylesheet" href="/css/reset.css" type="text/css" />
.
.
.
<img src="/pictures/a.gif" />

and so on. This way, it works good both on develop and production server.

Upvotes: 0

Views: 59

Answers (1)

Deepak Sharma
Deepak Sharma

Reputation: 4170

I tried and its working in my case check it out..!!!

<html>
<head>
    <!-- jquery file path-->
    <script src="blog/jquery.min.js" style="text/javascript"></script>
    <script>
    $("document").ready(function(){     
            // get the content of main page body
            var con = $("body").html();

            // replace everything in body and place a Iframe in body
            $('body').html('<iframe width="300" height="300" id="someId"></iframe>');       

            // set the content of the iframe body
            $('#someId').contents().find('body').html(con);     
    });
    </script>
</head>
<body>      
    Goole  : <img src="https://www.google.co.in/images/srpr/logo11w.png" alt = "My Icon" style="height:100px;width:250px"/> 
    Your content goes here..    
</body>
</html>

Upvotes: 1

Related Questions