根据手机端电脑端决定iframe内容显示或者隐藏的JS调用代码

网站建设者经常会用到iframe代码调用其他网页的内容，可有时候某些调用内容不适合网页的所有场合展示，所以我们可以根据手机端和电脑端决定是否显示调用网页内容，甚至可以根据不同终端展示不同的网页内容。

一、创建JS文件：

例如命名为pc_or_sj.js ，pc_or_sj.js这个文件中的内容为下面代码。

if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { 
//移动端
document.writeln("<div style=\'margin:0 auto;width:100%;text-align:center;;-position:relative;overflow:hidden\'>
<iframe src=\'https://www.****.com/\'margin-top: 0px; position: relative;left:0; width=\'100%\'height=\'1800\' frameborder=\'0\' ></iframe>
</div>");

}else{
document.writeln("<div style=\'margin:0 auto;text-align:center;position:relative;overflow:hidden\'>
<iframe scrolling=\'no\' src=\'https://www.*****.com/\' width=\'1200'height=\'3700\' frameborder=\'0\' align=\'middle\' style=\'margin-top: -90px; position: relative;left:0;\'>
</iframe></div>");
//上面margin-top: -90px;的作用是隐藏对方网站的logo,导航条等,不需要时,可以设置为0
}

然后上传到源站的根目录中，比如您打算存放js的站域名为 http://****.com/ ，那就可以把js上传到http://****.com/服务器的根目录中。

二、JS文件调用：

需要在其它网站上引入时，就可以这样调用。

<script src="http://****.com/pc_or_sj.js"></script>

假设我们存放JS文件的网站为A站，那么我们需要展示的网站为B站，

B站要显示这个js中的内容,则增加js调用, 添加代码后需要ctrl+f5 刷新,才可看到修改效果。

  <script type="text/javascript" src="http://****.com/pc_or_sj.js"></script>

 // 如果不希望手机上有缓存,方便刷新调试查看.可以这样调用

 <script>

  document.write('<script src="http://****.com/pc_or_sj.js?adv='+Math.random()+'"><\/script>');

</script>

其实iframe本身就是调用代码，而这个办法等于是通过JS调用iframe，也就是双重调用，看起来有点繁琐，但是总有一些情况下是需要用到的。前面我们的网站分享过iframe调用的方法，大家可以根据需求选择使用。

iframe代码调用网页并隐藏导航栏的方法  

发布时间：2023-11-14     阅读(326)