天天看点

iframe以全屏的方式引入一个页面

大家知道使用iframe可以引入一个页面,但是在默认状态下,iframe的宽度并不是全屏状态的。

这样的话,可能会严重影响我们的预览效果,下面就分享一段代码实例,它实现了全屏引入页面你的效果。

代码实例如下:

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;蚂蚁部落&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>style</code><code>&gt;</code>

<code>body{</code>

<code></code><code>margin:0;</code>

<code></code><code>padding:0;</code>

<code></code><code>overflow-y:hidden</code>

<code>}</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>window.onerror=function(){return true;}</code>

<code>$(function(){</code>

<code></code><code>headerH = 0;</code>

<code></code><code>var h=$(window).height();</code>

<code></code><code>$("#iframe").height((h-headerH)+"px");</code>

<code>});</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

原文发布时间为:2018-03-21

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

继续阅读