Same-origin policy for files - problem with iFrames
Question
I am currently struggeling with the Same-origin policy for files: A completely file-based project of mine had been working for years until the policy has changed. The project consists of the index.html:
<html>
<body>
<table>
<tbody>
<tr>
<td>
<iframe id="frame1" src="frame1.html" width="220" height="450"></iframe>
</td>
<td>
<iframe id="frame2" src="frame2.html" width="850" height="450"></iframe>
</td>
</tr>
</tbody>
</table>
</body>
</html>
and two more files included as iframes (frame1.html and frame2.html). Within frame1.html and frame2.html I perform the following javascript call:
parentWindow = window.parent;
var frames = parentWindow.frames;
in order to acces data of the other frame via
frames[x].
followed by the desired property.
According to https://developer.mozilla.org/en-US/docs/Archive/Misc_top_level/Same-origin_policy_for_file:_URIs it should work because both frames have index.html as their ancestor but (eg in Firefox) I am getting this error:
SecurityError: Permission denied to access property on cross-origin object
Can anyone help? Do I probably have to remove iframes? Any hint appreciated !
Thanks a lot in advance, best
Alex
1 answers
solution1
-1 2019-10-07 19:26:33
Anything related to direkt iframe-access failed, however, I figured an alternative that works well for me: Instead of direct communication between the iframes I am using the parent as a relay. In that context I am sending messages via
window.top.postMessage(['destinationIframe','desiredFunction',data1,..,dataX],'*');
from the iframes zu the parent, which forwards them to the destination iframe. Message reception at the parent and the iframes is realized via a listener:
window.onmessage = function(e){
if (e.data[1] == 'xyz') {
// do something
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.