I've come across a peculiar issue where I need to embed an iframe inside a Vue template and then be able to modify that iframe later. The code snippet below shows the simplified version of the problem:
<html>
<body>
<div id="app">
<iframe id="testFrame" src="javascript:''" width="500" height="500"></iframe>
<!-- This iframe is being inserted using the rails `yield` helper function. However, this is the MCVE representing our issue. -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script>
var doc = document.getElementById('testFrame').contentWindow.document;
doc.open();
doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
doc.close();
new Vue({
el: '#app'
});
</script>
</body>
</html>
The actual output of the iframe looks like this:
https://i.sstatic.net/jhM7Qm.png
However, what I aim for is to have it rendered as shown below:
https://i.sstatic.net/N4Wydm.png
What could be causing this issue, and how can I resolve it? (Note that this is just a basic example extracted from a much larger Rails application I'm developing.)