UPDATE: The problem only occurs in code which uses the "parent." variables. Removing that code fixed the problem:
I'm trying to present an online experiment within an iframe, but whilst the participant can start the experiment, as soon as they go past the first page I get the error:
"Uncaught DOMException: Blocked a frame with origin "https://www.open-collector.org" from accessing a cross-origin frame."
You can see an example of this at:
The experiment that the dropbox document (https://dl.dropbox.com/s/did85omief3j48o/iframe_in_iframe.html?dl=0) refers to is also on https://open-collector.org
The code to create the iframe that embeds the dropbox file is:
<iframe id='notebook_iframe'></iframe>
<script>
$.get("https://dl.dropbox.com/s/did85omief3j48o/iframe_in_iframe.html?dl=0", function(html_data){
page_content.html = html_data;
var doc = document.getElementById('notebook_iframe').contentWindow.document;
doc.open();
doc.write(html_data);
doc.close();
});
</script>
And the code within the dropbox file is:
<iframe id='experiment_1' src='https://www.open-collector.org/badger/sqlExperiment.php?experiment_id=RPDTXczwd6HU5FyG|55&participant=preview' style='width:800px; height:800px'></iframe>
I've read this page but my question involves content that's on the same domain. I've also read this page about pdfs, but I don't think it applies as I'm not writing a pdf into an iframe.
I think the fact that it starts to work, and then stops when the iframe moves to a different webpage within the domain, means that the issue is with changing pages, rather than domain, despite the warning?
p.s. Unfortunately, it is necessary to embed a frame within a frame, in case that's what's exacerbating the problem.