用div+jquery代替iframe框架

作者:澎涛 | 分类:科技 | 发布时间:2019-10-24 14:37:48 | 阅读:2305 | 点赞:0 | 点踩:0
标签: iframe

我们以前用iframe直接引入另外一个网页,简单粗暴,但是不利于seo。破坏界面的完整性。

下面可以用div替代。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>main</title>
<script src="jquery.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $.get("a.html",function(data){ //初始將a.html include div#iframe
    $("#iframe").html(data);
  }); 
$(function(){
  $('.list-side li').click(function() {
  // 找出 li 中的超链接 href(#id)
    var $this = $(this),
    clickTab = $this.find('a').attr('target'); // 找到链接a中的targer的值
    $.get(clickTab,function(data){
      $("#iframe").html(data); 
    });
  });
});
});
</script>
</head>

<body>
<h2>不要点击链接,点击链接行的空白处看看</h2>
<ul class="list-side">
  <li><a target="a.html" >about</a></li>
  <li><a target="b.html"  >news</a></li>
  <li><a target="c.html" href="c.html">product</a></li>
  <li><a href="" target="_blank" >contact</a></li>
</ul>

<div id="iframe">
  <!--jquery 插入html 位址-->
</div>
</body>
</html>

a.html,b.html以及c.html没有意义,就不放了

注意要引入

jquery



评论 (0)

登录 后发表评论

暂无评论