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

【问题标题】：How to access document.body from a script inside of document.write如何从 document.write 内部的脚本访问 document.body
【发布时间】：2021-05-29 09:16:15
【问题描述】：

帮助！我正在开发一个应用程序，该应用程序从 API 下载报告，该 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。

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

谢谢

【问题讨论】：

一个 XY 问题。在使用 document.write 的“解决方案”中查看问题之前重新审视需要实现的目标可能会有所帮助 - 在页面加载后使用 document.write 在 Chrome 和 Firefox 中的实现方式不同，并且它们不兼容。下载的 HTML 是否包含带有 <DOCTYPE> 声明、头部和正文部分的完整 HTML 文档？如果不是，它包含什么？需要保留进行下载的页面的哪些功能（如果有）？
这确实是一个完整的文档。加载后，它会运行许多脚本以根据随附的 XML 数据生成适当的图形和图表，这些数据在使用另存为时不会显示。我已经修改了我的工作以尝试使用 WebRTC 和 iFrame，并将我的插件脚本放在框架之外。
您能否包括在测试document.write 解决方案时生成的任何错误消息，您指的是哪个body 元素（插入之前或之后的那个），其中body 元素不能'找不到它产生了什么错误？有关指南，请参阅 How to Ask。我建议将document.write 代码放在您尝试过的代码下，并将tmp 设置为像<h1>Test document</h1> 这样的测试字符串常量，而不是result.data。
@traktor 唯一的信息是 document.body 不存在。我在插入之后而不是之前寻找身体。

标签： javascript dom document-body

【解决方案1】：

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

感谢任何 cmets。到目前为止，这不再需要。

【讨论】：