学习html——iframe
时间：2023-04-02 18:46:13
HTML
基本概念作为html页面的基本元素之一，iframe具有以下特点。内联元素的默认宽度为300px，高度为150px。它们遵循流式布局（Flowcontent），并且位于body元素中。段落内容（Phrasingcontent），可构成段落内嵌资源（Embeddedcontent），类似于video、img等交互内容（Interactivecontent），类似于button、textarea等非子节点（Palpablecontent）、iframe标签不嵌入任何元素。相反，可以在div标签中嵌入其他元素。关于html元素的组成内容划分，这张图有很好的解释：基本用法iframe有一些节点属性，如下：src:资源地址的绝对地址:会加载资源的相对地址对应地址：会加载当前页面，默认同about:blank：会显示一个空白页面srcdoc：iframe中需要渲染的内容会覆盖对应资源的内容。你为什么这么做？在一个iframe中，你可以加载不同的内容，不会被浏览器再次解释，例如：如果你想嵌入一些特殊的符号，你可以结合sandbox使用它（例子中的amp是一个特殊的符号）嘿，那是earl的桌子。你应该在下一个封面上找到earl&me。">name:启动嵌入文档资源Anamesandbox:设置一些安全规则，规定嵌入资源的一些行为，是否允许弹出窗口的行为allow-forms,allow-modals,allow-orientation-锁定、允许指针锁定、允许弹出窗口、允许弹出窗口转义沙盒、允许演示、允许同源、允许脚本、允许顶部导航和允许顶部导航-by-user-activation.allowfullScreen：指定嵌入资源是否允许全屏，true为允许。比如嵌入一篇文章，这篇文章有全屏查看操作//http://article....//省略文章内容
script:consthandleFullClick=()=>{constarticle=document.getElementById('article');article.requestFullscreen();}allow,设置是否允许对应的featurestrategy//内嵌iframe是否允许定位
referrerpolicy:枚举类型，设置一些策略enumReferrerPolicy{"","no-referrer","no-referrer-when-downgrade","same-origin","origin","strict-origin","origin-when-cross-origin","strict-origin-when-cross-origin","unsafe-url"};contentDocument和contentWindow：返回对应的document和iframewindow对应当前页面的document和window。综上所述，iframe可以嵌入第三方资源，可以对第三方资源进行策略限制。毕竟为了安全，第三方还是需要有一定的处理方式的。常见业务场景与iframe的通信iframe作为第三方资源嵌入到浏览器当前页面中。两者之间如果要通信，需要通过postMessageotherWindow.postMessage(message,targetOrigin,[transfer]);otherWindow：窗口的引用，即你要向谁发送消息message：内容发送的消息会被结构化克隆算法序列化targetOrigin:指定哪些窗口不能接收消息transfer:transfer中的对象，发送后会被垃圾回收，不会存储任何内容。示例：父窗口：//假设iframe的id=iframedocument.getElementById('iframe').contentWindow.postMessage('123','*');子窗口：Window.addEventListener('message',({data})=>{console.log('data');//向父窗口发送消息if(window.parrent!==window.self){window.parrent.postMessage('456','*');}})参考MDN-IframeHTMLstandard-iframe
