When working within the admin area of a website builder, I aim to provide users with a visual preview of style changes before they save any updates.
To achieve this, I use an iframe to display the user's website, allowing for visual adjustments to be made directly. Although the admin site and the user's site may have different codebases and custom domain names, which could potentially present some issues.
I have implemented a Content-Security-Policy to enable the admin area to fetch the iframe, and this is functioning as expected. However, I am facing difficulties in appending a temporary <style> tag to the head.
Here is a snippet of the code:
<template>
<div class="designer">
<div class="designer-sidebar">
<!-- style options -->
</div>
<div class="designer-content">
<iframe id="the-iframe" class="designer-frame" src="http://thechildsite.com" frameborder="0" width="100%" height="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</div>
</template>
<script>
export default {
data () {
return {
updating: false,
device: 'desktop'
}
},
ready () {
var iframe = document.getElementById('the-iframe')
var style = document.createElement('style')
style.textContent =
'body {' +
' background-color: lime;' +
' color: pink;' +
'}'
;
iframe.contentDocument.head.appendChild(style)
}
}
</script>