使用 Javascript 在 iframe 中附加样式 (vue.js)

Question

在网站构建器的管理区域内，我希望用户在保存更新之前直观地看到样式更改。

我以 iframe 用户网站的方式进行，以便可以直观地调整样式（可以这么说，在顶部）。我可以访问并拥有两个管理站点，尽管它们是不同的代码库，并且用户站点可以使用自定义域名，我认为这可能是一个问题。

我已经设置了Content-Security-Policy以允许管理区域拉入 iframe，并且按预期工作。但我不能在头部附加临时<style>标签。

法典：

<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>

Answer 1

刚刚复制了您的代码，对我来说var iframe总是为空？

将ready()切换到mounted()会用 iframe 填充var iframe。

样式标签也没有被填充，所以我尝试了这个：

var css = document.createElement('style');
css.type = 'text/css';
var styles = 'body {' +
    '  background-color: lime;' +
    '  color: pink;' +
'}';
css.appendChild(document.createTextNode(styles));
iframe.contentDocument.head.appendChild(css);

它实际上仍然没有将样式附加到 iframe 中（可能是我的权限问题？），但控制台注销css看起来更像它应该的？希望这至少有点帮助！

Answer 2

一位同事帮助我找到了基于postMessage的解决方案。更多详情请见：http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

在 Vue.js 应用中：

<div class="designer-content">
    <iframe ref="iframeContent" class="designer-frame" :src="liveSite" frameborder="0" width="100%" height="100%" @load="iframeStyles">
        <p>Your browser does not support iframes.</p>
    </iframe>
</div>
methods: {
    iframeStyles() {
        this.frame = this.$refs.iframeContent.contentWindow;
        const style =
            '.layout__wrapper {background:' + this.background + ';} ' +
            'body {color:' + this.text + ';} '
        this.frame.postMessage(style, '*');
    }
}

在要在其中进行 iframe 的站点中：

window.addEventListener('message', function(e) {
    if (e.origin === 'https://app.theparentapp.com') {
        var style = document.createElement('style');
        style.textContent = e.data;
        document.head.appendChild(style);
    }
});

希望它对其他人有所帮助。