首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

iframe内部DOM设置样式引发的思考

问题描述 在自己开发的后台登录界面中使用iframe引入中台的登录界面后,发现登录模块无法居中。于是尝试在iframe自己的项目中透过iframe修改内部的登录模块儿样式。...iframe内部的DOM中body元素有个min-width:1200px的属性设置,导致我设置iframe的宽高时,iframe总会出现滚动条。而我的目的就是要消除滚动条。...除了设置iframe内部DOM的样式还有别的方法吗?是否可以通过iframe的属性设置来达到目的?于是将iframe标签的相关属性都看了一看,最终通过设置iframe的属性解决问题。...iframe相关属性 allow用于为指定其特征策略。...srcdoc该属性是一段HTML代码,这些代码会被渲染到 iframe 中。如果浏览器不支持 srcdoc 属性,则会渲染 src 属性表示的内容。

1.9K20

实现一个 Code Pen:(四)浏览器编译代码

Iframe 实时运行 想要一个页面实时运行,并且 JS 变量不污染全局,Iframe 是一个不错的选择,得益于 iframe 有一个 srcDoc,我们可以直接更改里面的内容,页面就会实时变更和渲染,...[css, setCss] = useLocalStorage('css', '') const [js, setJs] = useLocalStorage('js', '') const [srcDoc...srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder...当然这是最简单的代码逻辑,为了防止整个 iframe dom 的销毁和重建,我使用 postMessage,具体代码可以直接看 Github JS 编译 以上代码逻辑, 编辑器实现了原生 js 和 css...的支持,但是不支持 react 和 typescript,若要支持,需要在插入 srcDoc 之前将代码表编译成 es5,其实 babel 有个游览器版本@babel/standalone,并且有 presets

91920

标签

用途 标签(又称内联框架元素)表示了一个嵌套的浏览上下文(browsing context),实际上是用来在当前页面中内嵌另一个HTML页面。 例子 标准属性 属性 描述 H5新 height 像素格式,或百分比格式指定frame的高度。 name 像素格式,或百分比格式指定frame的高度。...✔ seamless 规定 渲染成是容器页面文档的一部分。 ✔ src 嵌套页面的URL地址。 srcdoc 规定在 中显示的页面的 HTML 内容。...✔seamless规定 渲染成是容器页面文档的一部分。✔src嵌套页面的URL地址。 srcdoc规定在 中显示的页面的 HTML 内容。...变更点 标签在HTML5与HTML4.01之间存在如下差异 HTML5有一些新的属性,同时不再支持以下的HTML4.01属性 longdesc 规定一个页面,该页面包含了有关 iframe

81820

手摸手打造类码上掘金在线IDE(四)——双向通信

但是众所周知,iframe不是银弹,有得必有失,所谓鱼与熊掌不可兼得。 iframe 也有着两个难题 1、通信 2、跨域 在实现的过程中,需要花费很多力气绕很多弯路来达到目的。...接下来,我们就开始多写点代码,是多绕点弯路,来解决这两个问题 通信 说起iframe 的通信,相信对这个标签稍微有点了解的jym都对他深恶痛绝 因为,由于iframe 本身的限制,导致想要打通宿主环境,...我们知道一个iframe的想执行属于自己的js有两种途径 iframe执行方式 我们知道在iframe中常用的执行方式有三种 1、srcdoc执行方式 2、src 的执行方式 3、contentWindow...塞入html方式 srcdoc执行方式 srcdoc,简单的讲,就是利用 srcdoc属性,嵌入html 文本代码 代码如下: const iframe = document.createElement...("iframe"); iframe.srcdoc = `<!

71330

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券