Question

我有一个在线代码编辑器，并且希望将键入的HTML作为角落中框架中的迷你网页执行。

它目前看起来像屏幕左侧的文字处理器，右侧是白色方块（背景为黑色）。我希望用户输入编辑器的内容显示在白色框中，就像在那里加载整个页面一样。

目前，这是通过将框架的innerHTML设置为用户输入的代码来在javascript中完成的，但如果用户在元素上使用固定定位，则该元素可以移动到框架之外。如何将所有内容保持在框架内，就像将整个网页缩小到较小的尺寸一样？

Answer 1

尝试使用Iframe - 我针对您的问题对以下内容进行了测试，并确实有效。

<iframe name="myIframe" id="myIframe" style="width: 1000px; height: 100px; margin: 20px auto 0 auto;">

</iframe>
<a onclick="put()">Test</a>
<script>
    function put(){
        var LocalS = "<div style='position: fixed; width: 100px; height: 100px; background-color: black; top:0; left: 0;'></div>" // Your content to display goes  here
        document.getElementById("myIframe").src = "data:text/html;charset=utf-8," + escape(LocalS);
    }
</script>

希望这有帮助

请阅读以下内容：Set content of iframe，了解有关将内容放入iframe

的更多信息

CSS定位 - 制作一个小框架

1 个答案: