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总是空的？

使用iframe将ready()切换为mounted()填充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);
    }
});

希望它可以帮助别人。

使用Javascript（vue.js）在iframe中添加样式

2 个答案: