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

Question

帮助。 我正在开发一个应用程序，它从 API 下载报告，它给了我 HTML 作为 JSON 返回的一部分。 因为它返回 JSON 我不能简单地在新窗口中打开它。

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

          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 之外，并且仍然使用它来捕获整个页面，这就是我的目标。

感谢您的任何评论。 到目前为止，这不再需要。