1

让我们举个例子：

假设我有一个包含大量 DIV 的网页。现在我想将一个 DIV 及其子 DIV 渲染到 IFrame 中。

如果您渲染下面的代码，您将看到它包含一个黑色框，页面为红色。我需要的是得到那个黑盒子，如果它显示在 iframe 中。使用下面的代码，我能够完成 80% 的这些要求。唯一的问题是，在渲染 IFrame 时，会显示网页的背景颜色。所以看起来 IFrame 给出了一个左边距间隙，然后用红色背景颜色填充它。我不确定该怎么做。

这是代码：

 <html>
     <head>
        <link rel="stylesheet" type="text/css" href="/psy/render.css" />
        <script type="text/javascript" src="http://www.domain.com/psy/given.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="http://www.domain.com/psy/redaf.js"></script>
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

     /*
        This one makes the javascript functionality work when in iframe and supposedly 
        was also suppose to render this page correctly.  I got it from here:  
        http://css-tricks.com/snippets/jquery/fit-iframe-to-content/
    */

    <script type='text/javascript'>
        $(function(){
            var iFrames = $('iframe');

            function iResize() {
            for (var i = 0, j = iFrames.length; i < j; i++) {
                iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) {

               iFrames.load(function(){
                   setTimeout(iResize, 0);
               });

               for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
               }

            } else {
               iFrames.load(function() {
                   this.style.height = this.contentWindow.document.body.offsetHeight + 
                   'px';
               });
            }
        });

       </script>

       <title>Demo</title>
        <meta charset="utf-8" />
</head>
<body onload="countdown(year,month,day,hour,minute)">
   <div id="entire">
        <div id="text1">Text Sample 1</div>
       <div id="text2">Text Sample 2</div>
       <div id="countdown_script"></div>
  </div>
  <div class="other_stuff">
    <p class="titler">Title</p>
    <p>text block.</p>
  </div>

CSS：

  body {
 background-color: #990000;
 }

 #text1 {
 color: #FFFFFF;
 font-family: 'Helvetica Neue',Helvetica,Arial;
 font-size: 20px;
 margin-left: 20px;
 margin-top: 30px;
 padding-top: 40px;

 }
 .sampler {
 color: #FFFFFF;
 font-family: 'Helvetica Neue',Helvetica,Arial;
 margin-left: 450px;
 margin-top: 130px;
 text-shadow: 2px 2px 2px #000000;
 width: 500px;
 }
 p.titler {
 color: #ffffff;
 font-size: 30px;
 margin-bottom: -10px;
 }
 ul {
 list-style-type: none;
 }
 span {
 color: #FFFFFF;
 margin-left: 10px;
 }
 a {
 text-decoration: none;
 }
 #entire {
 background-color: #000000;
 height: 350px;
 margin-left: auto;
 margin-right: auto;
 width: 200px;
 -moz-box-shadow: 0 2px 15px #990000;
 -webkit-box-shadow: 0 2px 15px #990000;
 }
 #text2 {
 color: #FFFFFF;
 font-family: 'Helvetica Neue',Helvetica,Arial;
 font-size: 20px;
 letter-spacing: 5px;
 margin-left: 20px;
 margin-top: 15px;
 }
 .other_stuff {
 color: #FFFFFF;
 font-family: 'Helvetica Neue',Helvetica,Arial;
 margin-left: 450px;
 margin-top: 130px;
 width: 500px;
 }
4

1 回答 1

1

试试这个

  window.frames['yourIframe'].document.body.innerHTML = document.getElementById("yourContainerDiv").innerHTML;
于 2012-11-21T13:19:53.173 回答