javascript - 如何将 window.onload 中的函数输出传递给另一个 javascript 文件？

Question

在第一页上有一个按钮，单击该按钮会打开第二页，您可以在其中在 Canvas 上绘制图片。完成上述图片的绘制后，您可以单击发布按钮，将 Canvas 转换为图像 URL 并关闭第二页窗口。

然后我希望图像自动显示在原始首页上。

问题是，我似乎无法将新图像 URL 输出传回第一页。这两个脚本都包含在 window.onload 中，它似乎不允许我全局访问变量或函数。我试过将 pubNow 函数放在 window.onload 之外，将 Canvas 转换为图像，但将代码放在范围之外，并且几个变量返回未定义。我怎样才能传递这个变量？

这是下面的代码。请只使用 Vanilla Javascript。

注意:每个页面都有自己的 HTML、CSS 和 JS 文件。我想将一个函数的输出从一个 JS 文件传递​​到另一个 JS 文件。

//HTML
<script src= 'file1.js'></script>
<script src= 'file2.js'></script>
//JS File1
window.onload = function(){
//code that needs to use output of pubNow() after publish button is clicked on second page
}
//JS File2
const canvas = document.getElementsByClassName('draw');
const draw = canvas[0].getContext('2d');
//code that allows user to draw
const publish = document.getElementsByClassName('publish');
publish[0].addEventListener('mousedown', pubNow);
publish[0].addEventListener('mousedown', close);
window.onload = function () {
function pubNow (canvas){
const image = new image();
image.src = canvas.toDataURL('image/png');
return image;
}
function close (){
    window.close();
}
}

Answer 1

您可以使用 postMessage 来做到这一点:

index.html

<button id="open-btn">Open the canvas page</button>
<img id="img" src="" alt="" />

<script>
  document.getElementById("open-btn").addEventListener("click", openCanvasPage);

  window.addEventListener("message", function(msg) {
    document.getElementById("img").setAttribute("src", msg.data);
  });

  function openCanvasPage() {
    open("draw.html");
  }
</script>

canvas.html

<canvas id="canvas" width="500" height="500"></canvas>
<button id="publish-btn">Publish</button>

<script>
  document.getElementById("publish-btn").addEventListener("click", publishDrawing);

  function publishDrawing() {
    // `opener` is the window that spawned this one
    opener.postMessage(canvas.toDataURL(), "*");
    close();
  }
</script>

Demo