在另一个窗口中打开 Google 文档的图像答案

【问题标题】：Open a image of a Google Doc in in another window在另一个窗口中打开 Google 文档的图像
【发布时间】：2019-09-09 20:46:25
【问题描述】：

我有一个带有图片的 Google 文档。我想在另一个窗口的页面中打开选定的图像（谷歌文档是一个角色扮演游戏场景，我想在第二个屏幕上向我的玩家显示图像）。

我创建了一个带有 google 脚本的侧边栏，我可以在这个侧边栏中显示选定的图像。现在，我不知道如何打开一个新窗口（或连接现有窗口）并将图像数据发送到此窗口。

我首先尝试使用“PresentationRequest”，但在初始化时出现错误“PresentationRequest is not defined”...

presentationRequest = new PresentationRequest('receiver.html');

我的来源： https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays

有关如何将图像发送到侧边栏页面的信息（以及是否对某人有帮助）：

var doc = DocumentApp.getActiveDocument();
var selection = doc.getSelection();

if (selection) {
  var elements = selection.getRangeElements();
  var e = elements[0].getElement();

  if (e.getType() == DocumentApp.ElementType.INLINE_IMAGE) {
    var blobImg = e.asInlineImage().getBlob();
    return 'data:' + blobImg.getContentType() + ';base64,' + Utilities.base64Encode(blobImg.getBytes());
  }
}

HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style type="text/css">
      .tailMax {
        max-width: 260px;
        max-height: 260px;
      }

      .centre {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <form id="formJdr">
      <div style="padding-bottom: 10px;">
        <button type="button" id="btnAffImg" onclick="google.script.run.withSuccessHandler(afficheImg).selectImg()">Afficher</button>
        <label id="lblImg">Sélectionnez une image</label>
      </div>
      <img id="img" class="tailMax centre"/>
    </form>
    <script>
    function afficheImg(valeur) {
      if (typeof value === "string"){
        // Message
        afficheMessage(valeur);
      }
      else {
        try {
          // Image to show
          afficheMessage("");
          document.getElementById("img").src = valeur;
        }
        catch(error) {
          afficheMessage(error);
        }
      }
    }

    function afficheMessage(message) {
      document.getElementById("lblImg").innerHTML = message;
    }
    </script>
  </body>
</html>

我使用 Chrome 浏览器。

你认为有可能吗？

【问题讨论】：

你的html代码？以及使用的浏览器？
我已经编辑了我的消息...
对于未来的观众，目前，Google iframe 沙盒没有allow-presentation，因此这是不可能的。

标签： javascript google-apps-script google-docs

【解决方案1】：

修改你的try声明如下：

        try {
          // Image to show
          afficheMessage("");
          var image=document.getElementById("img");
          image.src = valeur;                                           
          var w = window.open("", '_blank');
         w.document.write(image.outerHTML);                                   

        }

var w = window.open("", '_blank'); w.document.write(image.outerHTML); 允许您打开一个新窗口，然后将图像作为字节数组写入其中。

【讨论】：

谢谢。我想我应该能够重复使用同一个窗口来更新图像...

【解决方案2】：

好的，在 Ziganotschka 的帮助下，我为此更新了我的 javascript 代码。现在我可以在新窗口中更改图像。只是对这个窗口的打开做一些改进，它会很好。

<script>
var affichage;

function afficheImg(valeur) {
  if (typeof value === "string"){
    afficheMessage(valeur);
  }
  else {
    try {
      afficheMessage("");

      var image = document.getElementById("img");
      image.src = valeur;
      affichage.document.body.innerHTML = "";
      affichage.document.write(image.outerHTML);
    }
    catch(error) {
      afficheMessage(error);
    }
  }
}

function afficheMessage(message) {
  document.getElementById("lblImg").innerHTML = message;
}

window.onload = function() {
  affichage = window.open("", '_blank');
</script>

【讨论】：