将身体移动到IFRAME会破坏内部链接

时间:2014-02-11 08:49:26

标签: jquery html css iframe

我将整个HTML复制到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);
});

到目前为止这种方法有效,但是images / css,其他链接都被破坏了。 HTML看起来像这样:

<!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" />

等等。这样,它在开发和生产服务器上都很好。

1 个答案:

答案 0 :(得分:1)

我试过,它在我的案例中工作检查出来...... !!!

<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>