ElectronJS: избежание проблем с перекрестным происхождением - PullRequest
Новая
       1

ElectronJS: избежание проблем с перекрестным происхождением

0 голосов
/ 29 сентября 2019

В нормальных условиях веб-приложениям с межстраничным взаимодействием не нужно беспокоиться о доступе из разных источников, если их страницы обслуживаются из одного домена в протоколе "http". Похоже, что Electron по умолчанию создает приложения, используя веб-страницы по «файловому» протоколу. Этот протокол не допускает любое межстраничное общение.

Если моему приложению Electron требуется межстраничное общение (в данном случае через iframe), прав ли я, считая, что приложению нужнызапустить веб-сервер вместе с Electron? Это кажется чрезмерным, и я не видел много разговоров об этом, но я не вижу лучшего способа обойти это. - это API Electron для пользовательских протоколов, но в документах не показано, как использовать пользовательские протоколы, просто как их настроить, и я не смог найти ни одногохорошие учебники по нему.

В целом, меня впечатлил ElectronJS в качестве фреймворка и сообщества, поэтому я удивлен, что не смог найти решение этой проблемы после серьезногопоиск. Я нашел вопрос, который задавали несколько раз, но нет четких ответов. Я был бы очень признателен за некоторое просветление.

Обновление:

Теперь я вижу, что подробности моей ситуации (необходимость говорить между родительским окном и iframe) создаютэто более сложная проблема, чем если бы существовало два отдельных окна (таких как главное окно и окно настроек), так как основной процесс обычно может действовать как связующий элемент через IPC. Это, безусловно, объясняет, почему решение было таким неуловимым.

1 Ответ

0 голосов
/ 30 сентября 2019

Я наконец нашел решение этой конкретной проблемы: Window.postMessage . Это технология HTML5, которая позволяет передавать сообщения между отдельными окнами с перекрестным происхождением, , включая iframes . Удивительно, но он отлично работает с «файловым» протоколом (т. Е. Без веб-сервера), поэтому он отлично работает для iframes в Electron.

Вот рабочий пример. У меня есть два файла: parent.html и child.html. Первый имеет iframe, который содержит последний:

parent.html 

<html>
	<body>
		<iframe id='f' src='child.html'></iframe><br/> <!-- First of two differences -->
		<button id='b'>send</button><br/>
		<div id='o'></div>
	</body>
</html>
<script>
	function receiveMessage(evt)
	{
		document.getElementById('o').innerHTML += evt.data + "<br/>";
	}
	window.addEventListener("message", receiveMessage, false);

	document.getElementById('b').onclick = function()
	{
		// The second of two differences between parent and child is below
		document.getElementById('f').contentWindow.postMessage("parent to child", "*");
	}
</script>

child.html 

<html>
	<body>
		<!-- The first of two differences between parent and child is here -->
		<button id='b'>send</button><br/>
		<div id='o'></div>
	</body>
</html>
<script>
	function receiveMessage(evt)
	{
		document.getElementById('o').innerHTML += evt.data + "<br/>";
	}
	window.addEventListener("message", receiveMessage, false);

	document.getElementById('b').onclick = function()
	{
		// The second of two differences between parent and child is below
		window.parent.postMessage("child to parent", "*");
	}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...