CSS定位-制作一个小框架

CSS positioning - make a small frame

本文关键字：一个 框架 定位 CSS      更新时间：2023-12-19

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

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

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

尝试使用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>

希望这能帮助

请阅读：设置iframe的内容，以获取有关将内容放入iframe 的更多信息

相关文章：