使用ajax代替iframe

时间：2023-03-27 08:16:14

　　相信大多数程序员都跟iframe打过交道，iframe简单，好用。在我用的过程中比较苦逼的是关于iframe高度的设置。

　　由于子页面内容不确定，页面高度也不确定。于是开始网上的各种搜索，一般有两种：一种是通过父页面同一控制，另一种是通过子页面控制父页面的高度。通过父页面直接控制，试过n多次，屡试不对。。。于是通过另一种子页面控制父页面的高度

<iframe src="" id="mainFrame" name="mainFrame" width="100%" height="800" frameborder="no" border="0" scrolling="no"></iframe>

像这个iframe，如果想要实现iframe的高度随子页面内容的高度自适应，我们需要等子页面加载完成之后添加js代码，这段代码是经过我多次升级之后一直用的js代码实现想要功能

var oHeight = (document.body.scrollHeight)||(document.body.offsetHeight);

window.parent.document.getElementById('mainFrame').height = oHeight;

这种方法虽然在我做过的项目中没有出现什么兼容性问题，但是有一缺点就是，每个子页面都不能忘记调用这一段js代码，否则就会出问题。

　　福利来啦！！！

　　现在我们用jq的ajax来实现上述功能，但是不使用iframe标签，假如我们的html如下：

<a targeurl="productman.htm" class="menutar block">产品管理</a>

<a targeurl="orderman.htm" class="menutar block">订单管理</a>

<a targeurl="basicarc.htm" class="menutar block">基础档案</a>

　　对应的js代码，我们只需要得到需要显示的页面路径，并ajax请求该路径，将请求的数据给了我们代替iframe的div即可。

　　我们的div如下：

<div class="conIfram" id="ifrig"></div>

　　对应的js，需要添加到a标签的click事件上，代码如下：

$(".menutar").click(function(){

  var obj = this;

var tarurl = $(obj).get(0).attributes["targeurl"].nodeValue;

  // console.log(tarurl);

  $.post(tarurl,function(datas){

    $("#ifrig").html(datas);

  });

});

　　粘贴代码试试吧

相关文章