JSFiddle - React, Tailwind, and code Playground
HTML
<pre></pre>
<iframe srcdoc="<iframe><div>sss</div></iframe><script>parent.start(document)</script>"></iframe>
CSS
pre { white-space: pre-wrap; }
JavaScript
var topWindow = this;
function log(str) {
topWindow.document.querySelector('pre').textContent += str + '\n';
}
function start(doc1) {
const doc2 = doc1.querySelector('iframe').contentDocument;
log('Top: ' + topWindow.document.URL + ' base=' + topWindow.document.baseURI);
log('Child: ' + doc1.URL + ' base=' + doc1.baseURI);
log('Grandchild before open(): ' + doc2.URL + ' base=' + doc2.baseURI);
try {
doc2.open("", "");
} catch (e) { log(e); }
doc2.appendChild(doc2.createElement('html'));
doc2.firstChild.appendChild(doc2.createElement('head'));
var base = doc2.createElement('base');
base.setAttribute('href', 'http://google.com');
doc2.head.appendChild(base);
log(doc2);
log('Grandchild: after open(): ' + doc2.URL + ' base=' + doc2.baseURI)
const sc = doc2.createElement('script');
sc.setAttribute('src', '//imasdk.googleapis.com/js/sdkloader/ima3.js');
sc.onerror = function() { log('ima3 loading FAIL'); };
sc.onload = function() { log('ima3 loading: SUCCEEDED'); };
if (!doc2.firstChild)
doc2.appendChild(doc2.createElement('html'));
doc2.firstChild.appendChild(doc2.createElement('body'));
doc2.body.appendChild(sc);
}