如何从 document.write 中的脚本访问 document.body

Question

求助！我正在开发一个从 API 下载报告的应用程序，它给我 HTML 作为 JSON return 的一部分。因为它 returns JSON 我不能简单地在新的 window.

中打开它

在这个脚本中我注入了这段代码：

          let tmp = result.data;
          let spot = tmp.indexOf('</body>');
          let insert = `<div style="position:fixed; top:200px;left:20px; width:200px;font-size:15pt">
         

          <div class="camera">
            <video id="video" style='display:hidden'>Video stream not available.</video>
            <button  onClick='takepicture()'>Take photo</button> 
          </div>
          <canvas id="canvas" style='display:none;'></canvas>
        <!--<button onClick='genPDF()'>PDF</button>-->
          Press CTRL+S to save page as HTML
          <img id="testDownloadImage" src='' width=600 height=400 />
          </div>
          
          <script type='text/javascript'>
alert(document.body.innerHtml)
          // function clearphoto() {
          //     var context = canvas.getContext('2d');
          //     context.fillStyle = "#AAA";
          //     context.fillRect(0, 0, canvas.width, canvas.height);

          //     var data = canvas.toDataURL('image/png');
          //     // photo.setAttribute('src', data);
          //   }
            
            // Capture a photo by fetching the current contents of the video
            // and drawing it into a canvas, then converting that to a PNG
            // format data URL. By drawing it on an offscreen canvas and then
            // drawing that to the screen, we can change its size and/or apply
            // other changes before drawing it.

            async function takepicture() {
              let video = document.getElementById('video');
              let canvas = document.getElementById('canvas');

              let displayMediaOptions={video: true,displaySurface:'browser', logicalSurface:true, cursor:'never', audio: false};
              try{
                video.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
                // video.play();
                var context = canvas.getContext('2d');
                width=window.innerWidth;
                height=window.scrollHeight;
                if (width && height) {
                  canvas.width = width;
                  canvas.height = height;
                  context.drawImage(video, 0, 0, width, height);
                
                  var data = canvas.toDataURL('image/jpg'); //.replace(/^data:image\/(png|jpg);base64,/, "");
                  // photo.setAttribute('src', data);
                  document.getElementById('testDownloadImage').src=data;
                  // location.href=data;
                } else {
                  // clearphoto();
                }
              }
              catch(err) {
                console.log("An error occurred: " + err);
              }
              finally{
              let tracks = video.srcObject.getTracks();
              tracks.forEach(track => track.stop());
              video.srcObject = null;
              }
            }
        </script>
          `
          let newStr = [tmp.slice(0, spot), insert, tmp.slice(spot)].join('');
          document.write(newStr);

允许我添加打印屏幕选项，以便可以对报告进行成像。我尝试过其他实用程序将 HTML 保存为 PDF 或什至保存页面，但由于报告使用大量 XSLT 和脚本来显示结果，这些方法失败了，让我只能选择打印屏幕.

WebRTC 恰当地处理了这个问题，有一个小困难：因为我正在使用 document.write 我无法找到 document.body 即使我传递的代码是一个格式正确的页面（等） .

如何使用插入的脚本显示页面并将其捕获为图像？

谢谢

Answer 1

遗憾的是，这不是真正的答案，但我通过将整个写入移动到外部脚本的 iFrame 解决了这个问题。然后我得到了 iFrame 文档的 scrollHeight 并调整了框架的大小以匹配它，有效地让它看起来好像文档占据了整个页面。这样我就可以将我的脚本放在 iFrame 之外并仍然使用它来捕获整个页面，这正是我想要的。

感谢您提出任何意见。现在已经不需要了。

如何从 document.write 中的脚本访问 document.body

How to access document.body from a script inside of document.write

javascript

dom

document-body