后台iframe适应网页及跳转

Author Avatar
Amos
2017-12-16 18:42:56
👀

做后台的时候接触到iframe,写了一个非常简单的跳转方法,Mark方便以后用~

(≖ ‿ ≖)✧

一、iframe适应网页

1.iframe代码
<iframe src="进入后台显示的网页" frameborder="0"  id="iframeid_admin" onload="Javascript:SetiframeHeight()" width="100%"></iframe>
2.JS代码 获取当前网页高度适应
function SetiframeHeight(){
  var iframeid=document.getElementById("iframeid_admin"); //iframe id
  if (document.getElementById){
   if (iframeid && !window.opera){
    if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
     iframeid.height = iframeid.contentDocument.body.offsetHeight+100;
    }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
     iframeid.height = iframeid.Document.body.scrollHeight+100;
    }
   }
  }
 }

ps:适应了之后,假如跳转的网页高度小于后台高度,底部可能会留白,但是不影响使用~


二、iframe跳转

1.思路

点击获取自定义属性的值(如:data-url中放网页地址)
把获取到的地址放入iframe的src
实现跳转(超简单)

2.链接代码
<li class="layui-nav-item"><a data-url="/copy.php" onclick="javascript:targetPage(this);" href="javascript:;">关于</a></li>
3.JS代码获取id跳转
function targetPage(e){
  var url=$(e).attr("data-url"); //获取URL
  $('#iframeid_admin').attr('src',url); //赋值 跳走
}

转载请遵循 协议许可
本文所有内容严禁任何形式的盗用
本文作者:Amos Amos
本文链接:https://amoshk.top/Layui iframe/

评论
✒️ 支持 Markdown 格式
🖼️ 头像与邮箱绑定 Gravatar 服务
📬 邮箱能够收到回复提醒(可能会在垃圾箱内)