iframe 是HTML 中的一种标签，全称为 Inline Frame，即内联框架。它可以在网页中嵌入其他页面或文档，将其他页面的内容以框架的形式展示在当前页面中。iframe的使用方式是通过在HTML文档中插入标签，并设置相应属性来指定要嵌入的页面地址。例如：。通过这种方式，当前页面就会在指定位置显示嵌入的页面。</p> <p> 就如上图所示，我们在页面里内联了一个PDF文档，其可以转为Word文档，包括打印、下载、双页预览等功能的实现。这些具体功能的实现主要是由后端来做技术支撑的。前端主要是将后端传来的文档渲染在我们的页面中。这个主要是通过 iframe 来完成的。下面让我们来看一下百度给的定义：</p> <div> <p><img alt="" height="216" src="https://1000bd.com/contentImg/2023/11/17/193722695.png" ></p> </div> <blockquote> <p>IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。</p> </blockquote> <p> 通过这段文字，我们可以看到 iframe 是 html 自带的一个标签。也就是说我们可以直接使用而不需要去安装依赖等。同时我们可以对这个内联框架进行修改样式。让其展示成符合我们预期的东西。</p> <p>提示：</p> <ul><li>HTML 与 XHTML 之间的差异：在HTML4.1 Strict DTD和XHTML1.0 Strict DTD中，不支持iframe元素。 </li><li>可以把需要的文本放置在<iframe>和之间，这样就可以应对无法理解iframe的浏览器。
属性
值
描述
align
left
right
top
middle
bottom
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 。</p> </td></tr><tr><td style="width:126px;"> <p>frameborder</p> </td><td style="width:108px;"> <p>1</p> <p>0</p> </td><td> <p>HTML5 不支持。规定是否显示 <iframe> 周围的边框。</p> </td></tr><tr><td style="width:126px;"> <p>height</p> </td><td style="width:108px;"> <p><em>pixels</em></p> </td><td> <p>规定 <iframe> 的高度。</p> </td></tr><tr><td style="width:126px;"> <p>longdesc</p> </td><td style="width:108px;"> <p><em>URL</em></p> </td><td> <p>HTML5 不支持。规定一个页面，该页面包含了有关 <iframe> 的较长描述。</p> </td></tr><tr><td style="width:126px;"> <p>marginheight</p> </td><td style="width:108px;"> <p><em>pixels</em></p> </td><td> <p>HTML5 不支持。规定 <iframe> 的顶部和底部的边距。</p> </td></tr><tr><td style="width:126px;"> <p>marginwidth</p> </td><td style="width:108px;"> <p><em>pixels</em></p> </td><td> <p>HTML5 不支持。规定 <iframe> 的左侧和右侧的边距。</p> </td></tr><tr><td style="width:126px;"> <p>name</p> </td><td style="width:108px;"> <p><em>name</em></p> </td><td> <p>规定 <iframe> 的名称。</p> </td></tr><tr><td style="width:126px;"> <p>sandbox(#)</p> </td><td style="width:108px;"> <p>""</p> <p>allow-forms</p> <p>allow-same-origin</p> <p>allow-scripts</p> <p>allow-top-navigation</p> </td><td> <p>对 <iframe> 的内容定义一系列额外的限制。</p> </td></tr><tr><td style="width:126px;"> <p>scrolling</p> </td><td style="width:108px;"> <p>yes</p> <p>no</p> <p>auto</p> </td><td> <p>HTML5 不支持。规定是否在 <iframe> 中显示滚动条。</p> </td></tr><tr><td style="width:126px;"> <p>seamless(#)<strong>()</strong></p> </td><td style="width:108px;"> <p>seamless</p> </td><td> <p>规定 <iframe> 看起来像是父文档中的一部分。</p> </td></tr><tr><td style="width:126px;"> <p>src</p> </td><td style="width:108px;"> <p><em>URL</em></p> </td><td> <p>规定在 <iframe> 中显示的文档的 URL。</p> </td></tr><tr><td style="width:126px;"> <p>srcdoc(#)</p> </td><td style="width:108px;"> <p><em>HTML_code</em></p> </td><td> <p>规定页面中的 HTML 内容显示在 <iframe> 中。</p> </td></tr><tr><td style="width:126px;"> <p>width</p> </td><td style="width:108px;"> <p><em>pixels</em></p> </td><td> <p>规定 <iframe> 的宽度。</p> </td></tr></tbody></table></div> <h3><a name="t3"></a> 3、标准属性</h3> <h4><a name="t4"></a>核心属性</h4> <div class="table-box"><table><tbody><tr><th> <p>属性</p> </th><th> <p>值</p> </th><th> <p>描述</p> </th></tr><tr><td> <p>class</p> </td><td> <p><em>classname</em></p> </td><td> <p>规定元素的类名（classname）</p> </td></tr><tr><td> <p>id</p> </td><td> <p><em>id</em></p> </td><td> <p>规定元素的特定id</p> </td></tr><tr><td> <p>style</p> </td><td> <p><em>style_definition</em></p> </td><td> <p>规定元素的行内样式（inline style）</p> </td></tr><tr><td> <p>title</p> </td><td> <p><em>text</em></p> </td><td> <p>规定元素的额外信息（可在工具提示中显示）</p> </td></tr></tbody></table></div> <h4><a name="t5"></a>语言属性</h4> <div class="table-box"><table><tbody><tr><th> <p>属性</p> </th><th> <p>值</p> </th><th> <p>描述</p> </th></tr><tr><td> <p>dir</p> </td><td> <p>ltr | rtl</p> </td><td> <p>设置元素中内容的文本方向。</p> </td></tr><tr><td> <p>lang</p> </td><td> <p><em>language_code</em></p> </td><td> <p>设置元素中内容的语言代码。</p> </td></tr><tr><td> <p>xml:lang</p> </td><td> <p><em>language_ code</em></p> </td><td> <p>设置XHTML文档中元素内容的语言代码。</p> </td></tr></tbody></table></div> <h4><a name="t6"></a>键盘属性</h4> <div class="table-box"><table><tbody><tr><th> <p>属性</p> </th><th> <p>值</p> </th><th> <p>描述</p> </th></tr><tr><td> <p>accesskey</p> </td><td> <p><em>character</em></p> </td><td> <p>设置访问元素的键盘快捷键。</p> </td></tr><tr><td> <p>tabindex</p> </td><td> <p><em>number</em></p> </td><td> <p>设置元素的Tab键控制次序。</p> </td></tr></tbody></table></div> <h2><a name="t7"></a>二：iframe 实现</h2> <h3><a name="t8"></a>1、html 部分</h3> <p> 这里是我们的 html 部分，可以看到使用了<iframe>标签，并且给 frameborder 边框属性设置为 0 。同时给了一个自适应最大的高和宽度。</p> <pre data-index="0" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:859px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">template</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: flex;justify-content: center"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">el-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"closeDialog"</span>></span>返回<span class="hljs-tag"></<span class="hljs-name">el-button</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"downloadPdf"</span>></span>下载pdf<span class="hljs-tag"></<span class="hljs-name">el-button</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 100vh"</span> ></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"iframeRef"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"reportPath"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"100%"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"100%"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">template</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3><a name="t9"></a><code class="language-html">2、JS部分</code></h3> <p> 下面的话是我们项目中的JS部分，这里面是跟 iframe 有关的部分代码，在 created 生命周期中，我们拼接了 reportPath 文件的地址，这个是传给 html 部分的 src 属性。这样我们就可以将其展示在我们的页面上。</p> <p> 同时写了一个 downloadPdf() 下载文件方法。并且给这个方法自定义了名字以及内部各式等。其绑定了 HTML 中 button 按钮。</p> <pre data-index="1" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:890px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">import</span> {dowloadPdf} <span class="hljs-keyword">from</span><span class="hljs-string">'@/utils/dowloadPdf'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">import</span> lang <span class="hljs-keyword">from</span> <span class="hljs-string">'@/mixins/lang'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">import</span> html2pdf <span class="hljs-keyword">from</span> <span class="hljs-string">'html2pdf.js'</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">name</span>: <span class="hljs-string">'detail'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">langPrefix</span>: <span class="hljs-string">'operationReportDayReport'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">mixins</span>: [lang],</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">props</span>: [</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-string">'data'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> ],</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">reportPath</span>: <span class="hljs-string">''</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">async</span> <span class="hljs-title function_">created</span>(<span class="hljs-params"></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 初始化文件的url地址</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">const</span> host = <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-variable language_">window</span>.location.protocol}</span>//<span class="hljs-subst">${<span class="hljs-variable language_">window</span>.location.hostname}</span>:<span class="hljs-subst">${<span class="hljs-variable language_">window</span>.location.port}</span>/files/`</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">reportPath</span> = host + <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">reportPath</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">methods</span>: {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">downloadPdf</span>(<span class="hljs-params"></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">let</span> loading = <span class="hljs-variable language_">this</span>.$loading({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">lock</span>: <span class="hljs-literal">true</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">text</span>: <span class="hljs-string">'文件处理中，请稍后'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">spinner</span>: <span class="hljs-string">'el-icon-loading'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">background</span>: <span class="hljs-string">'rgba(0, 0, 0, 0.7)'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> });</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">const</span> iframe = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$refs</span>.<span class="hljs-property">iframeRef</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">const</span> doc = iframe.<span class="hljs-property">contentDocument</span> || iframe.<span class="hljs-property">contentWindow</span>.<span class="hljs-property">document</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">const</span> element = doc.<span class="hljs-property">documentElement</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">let</span> fileName = <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.data.reportName}</span>_<span class="hljs-subst">${<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime()}</span>.pdf`</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//新的下载方法开始</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">dowloadPdf</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">reportPath</span>,fileName,loading)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//新的下载方法结束</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">const</span> opt = {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">margin</span>: [<span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>], <span class="hljs-comment">// 设置页面边距</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">filename</span>: fileName, <span class="hljs-comment">// 指定下载的文件名</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">image</span>: { <span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>, <span class="hljs-attr">quality</span>: <span class="hljs-number">0.98</span> }, <span class="hljs-comment">// 导出图片的格式和质量</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">html2canvas</span>: { <span class="hljs-attr">scale</span>: <span class="hljs-number">2</span> }, <span class="hljs-comment">// HTML 转换为 Canvas 的缩放比例</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">jsPDF</span>: { <span class="hljs-attr">unit</span>: <span class="hljs-string">'pt'</span>, <span class="hljs-attr">format</span>: <span class="hljs-string">'a4'</span>, <span class="hljs-attr">orientation</span>: <span class="hljs-string">'portrait'</span> } <span class="hljs-comment">// PDF 的尺寸和方向</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="43"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> };</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="44"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">html2pdf</span>().<span class="hljs-title function_">set</span>(opt).<span class="hljs-title function_">from</span>(element).<span class="hljs-title function_">save</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="45"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> loading.<span class="hljs-title function_">close</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="46"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="47"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="48"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="49"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2><a name="t10"></a>三：结尾</h2> <p> iframe的主要作用是实现页面的嵌套和内容的分割。它可以在一个页面中同时展示多个其他页面的内容，使得网页的结构更加灵活多样。常见的应用场景包括：</p> <ul><li>嵌入其他网页：通过iframe可以将其他网页的内容嵌入到当前页面中，实现跨域展示内容的功能。这在一些需要同时展示多个来源的信息的网站中非常常见。</li><li>分割页面内容：通过iframe可以将页面的内容划分为多个部分，每个部分独立显示不同的页面内容。这样可以实现页面的模块化，方便管理和维护。</li><li>弹出层：通过iframe可以实现弹出层的效果，即在当前页面上方以浮动的形式展示另一个页面的内容。这在一些需要实现弹窗、对话框等功能时非常有用。</li><li>加载外部内容：通过iframe可以将外部的文档、视频、地图等内容嵌入到当前页面中，丰富页面的功能和展示效果。</li></ul> <p> 虽然iframe有很多有用的功能，但也存在一些问题和注意事项：</p> <ul><li>安全性问题：由于iframe可以加载其他域下的页面，存在跨域脚本攻击的风险。为了保证网页的安全，浏览器会对iframe进行一些限制，如同源策略等。</li><li>SEO问题：搜索引擎对于iframe中的内容的处理不够友好，可能无法正确解析其中的文本和链接。这可能影响到网页的搜索排名和流量。</li><li>页面加载性能：使用iframe会增加页面的加载时间，特别是在嵌入较大页面或资源时。因此，在使用iframe时需要注意页面性能的影响。</li></ul> <p> 总之，iframe是一种在HTML中嵌入其他页面或文档的标签，可以实现页面的嵌套和内容的分割。它的灵活性和功能丰富使得它在网页开发中得到广泛应用，但也需要注意安全性、SEO和性能等问题。</p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1121110">操作系统基础教程——第五章课后作业答案</a> <br /> <a href="/Article/Index/868612">希尔排序超详细讲解C语言</a> <br /> <a href="/Article/Index/656183">三星大规模生产3nm芯片？预计明年就能流通各大手机厂商手中</a> <br /> <a href="/Article/Index/1164970">【机器学习】推荐系统</a> <br /> <a href="/Article/Index/1297921">大数据-玩转数据-Flink CEP编程</a> <br /> <a href="/Article/Index/892411">特殊功能寄存器</a> <br /> <a href="/Article/Index/969405">iOS动画相关</a> <br /> <a href="/Article/Index/858331">Linux shell printf命令小例子</a> <br /> <a href="/Article/Index/846322">【华为题库之字符串分隔, Getline()函数的使用！】</a> <br /> <a href="/Article/Index/946096">绿色工厂！2022年湖北省绿色制造名单推荐工作要求、时间</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/c18559787293/article/details/134440058 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>
一：什么是