Как я могу передать вывод функции, который находится внутри window.onload, в другой файл javascript? - PullRequest
Новая
       67

Как я могу передать вывод функции, который находится внутри window.onload, в другой файл javascript?

0 голосов
/ 23 декабря 2018

На первой странице есть кнопка, при нажатии на которую открывается вторая страница, позволяющая нарисовать рисунок на холсте.Закончив рисовать указанное изображение, вы можете нажать кнопку публикации, которая преобразует холст в URL-адрес изображения и закрывает окно второй страницы.

Затем я хочу, чтобы изображение автоматически отображалось на исходной первой странице,

Проблема в том, что я не могу передать вывод URL нового изображения обратно на первую страницу.Оба сценария обернуты в window.onload, который, кажется, не позволяет мне обращаться к переменным или функциям глобально.Я попытался поместить функцию pubNow, которая преобразует холст в изображение за пределами window.onload, но выводит код за пределы области видимости, и некоторые переменные возвращают неопределенное значение.Как я могу передать эту переменную?

Вот код ниже.Только ванильный Javascript, пожалуйста.

Примечание. Каждая страница имеет свой собственный файл HTML, CSS и 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();
}
}

1 Ответ

0 голосов
/ 23 декабря 2018

Вы можете сделать это, используя 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>

Демо

...