SecurityError on cross-origin object with window.open

问题

I have the javascript code below that executes when you click on a picture (img tag), it uses also the array called photoOrder.

var photoOrder = [1,2,3,4,5];
//Open center figure in separate window
function bigPicture() {
var propertyWidth = 900;
   var propertyHeight = 550;
   var winLeft = ((screen.width - propertyWidth) / 2);
   var winTop = ((screen.height = propertyHeight) / 5);
   var winOptions = "width=900,height=550";
   winOptions += ",left=" + winLeft;
   winOptions += ",top=" + winTop;
   var bigPicWindow = window.open("./biggerPicture.html", "BiggerPicture", winOptions);
   bigPicWindow.focus();
}

On the receiving window, I have the following code to access the photoOrder array:

var photoOrderArray = window.opener.photoOrder;

The main idea is to view a biiger version of the IMG that is displayed. But when I click on it, the second windows called by window.open has got the following error:

SecurityError: Permission denied to access property "photoOrder" on cross-origin object

how do I fix this? I tried window.postMessage but that just opens a new cans of worms with errors. I am running it on my local pc by double clicking on the index.html file. Its a study project I am busy with, not a live website.

回答1:

Seems the only way around it is to setup a web server, even just with a simple setup like Xamp to get away from the error so it runs as a live website having the Xamp computer IP as the domain.

来源：https://stackoverflow.com/questions/61054965/securityerror-on-cross-origin-object-with-window-open