1

例を使用しましょう：

多くの DIV を含む Web ページがあるとします。ここで、1 つの DIV とその子 DIV を IFrame にレンダリングしたいと考えています。

以下のコードをレンダリングすると、ページが赤色の黒いボックスが含まれていることがわかります。私が必要としているのは、そのブラック ボックスを取得し、それが表示されている場合は Iframe に表示することです。以下のコードを使用すると、これらの要件の 80% を達成できます。唯一の問題は、IFrame をレンダリングするときに Web ページの背景色が表示されることです。そのため、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 に答える