I have an HTML page that contains a button says "Open Popup". Once this button is clicked, a popup window opens (using window.open).
The new popup window is an HTML page that contains a simple input filed and a submit button. Once the submit button is clicked, the popup window should close, and the text that's just been typed in the input field should now be displayed in the parent window.
I've tried doing it using opener.document.getElementById. It works perfectly in Firefox, but not in Chrome.
This is the code of my parent page (parent.html):
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="openPopup()">Open Popup</button>
<p id="result"></p>
<script type="text/javascript">
function openPopup() {
var popupWindow = window.open('popup.html', '', 'width=300, height=200');
}
</script>
</body>
</html>And this is the code of my popup (popup.html):
<!DOCTYPE html>
<html>
<body>
<input type="text" id="userText" placeholder="Please enter some text">
<button type="button" onclick="submitText()">Submit!</button>
<script type="text/javascript">
function submitText() {
opener.document.getElementById('result').innerHTML = 'The text you\'ve entered is: ' + document.getElementById('userText').value;
self.close();
}
</script>
</body>
</html>Note: Both parent and popup files are located in my desktop.
As mention, it works in Firefox, but not in Chrome. When I click the "Submit!" button in Chrome, nothing happens, and the following error shows up in the console:
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
I spent hours trying to find help online, but I still can't make Chrome pass data from popup window to parent page (which both are, as mentioned, located in my desktop, i.e. in the same directory).
Thanks in advance.
