`
qinya06
  • 浏览: 597527 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jQuery Include HTML、插入html、jquery替代iframe

 
阅读更多
jQuery能做到的比iframe连接另一个网页html內容來的活用,使用css做样式变化,也较有弹性。再次比较sp include 和 php include 这样的方式无需使用以上asp和php服务器就能达到你想要的include html

下列程式变化更加入了导航(Menu list)做连接的切换,分別使用jquery include
三个html网页(a.html、 b.html、c.html)。
希望这样的方式能为您带來好的帮助。
<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" >product</a></li>
<li><a href="http://ucmic.blogspot.com/" target="_blank" >contact</a></li>
</ul>

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


$(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); 
 });
})
})
});
分享到:
评论

相关推荐

    基于 jquery 的 web 开发中通用 js

    2.支持 html include 与 iframe 不同是不包含 &lt;!doctype 。。。等一大堆没用的东西 3.将毫秒时间格式为你想要的格式 4.禁止空格输入 5.字符串转 bool 值 6.浏览器类型 7.以新标签页打开窗口(ie 不支持) 8.页面之间...

    基于Layer+jQuery的自定义弹框

    而Layer是一个基于jQuery的弹出层插件,它提供了更加丰富的弹框功能,比如对话框、提示框、加载层、iframe层等,并且提供了多种样式和参数,以适应不同的场景需求。 在实现自定义弹框时,首先要做的是将弹框的HTML...

    jquery ajax表单提交

    // clean url (don't include hash vaue) url = (url.match(/^([^#]+)/)||[])[1]; } options = $.extend(true, { url: url, success: $.ajaxSettings.success, type: method || 'GET', iframeSrc: /^...

    web前段开发

    - **内联框架**: `&lt;iframe&gt;`标签用来嵌入另一个HTML文档,如`&lt;iframe src="include.html" width="200" height="120"&gt;&lt;/iframe&gt;`。 - **文本格式化标签**: - `&lt;b&gt;`和`&lt;strong&gt;`: 加粗文本。 - `&lt;i&gt;`和`&lt;em&gt;`: 斜体...

    php 提交表单 关闭layer弹窗iframe的实例讲解

    Iframe是HTML中用于嵌入文档的标记,可以用于实现一个网页中的网页,常常被用来加载外部资源而不干扰当前页面。本文将结合这三个技术点,通过实例讲解如何在PHP表单提交后关闭Layer弹窗中的iframe。 首先,介绍...

    web前端发展简史.docx编程资料

    此外,`frameset`和`iframe`等HTML标签被用来加载具有独立功能的子页面,从而实现了早期的界面组件化。 同时,一些浏览器厂商开始尝试提供客户端组件技术。例如,Internet Explorer推出了HTML Component (HTC),...

    回购

    这些部分通常在每个页面上都相同,因此可以将它们放在单独的HTML文件中,然后在需要的地方通过`&lt;iframe&gt;`,`&lt;link rel="import"&gt;`(Web Components的一部分,但已被废弃),或者使用JavaScript库如jQuery的`.load()`...

    JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)

    在JavaScript中,我们经常需要加载外部资源,如脚本文件或IFRAME框架页,而这些操作往往是异步的,即它们不会阻塞主线程,直到加载完成。为了解决这种异步问题并确保在资源加载完毕后执行特定的操作,我们可以使用...

    frameset与div布局的优缺点

    1.使用JQuery框架简化Ajax与JavaScript的开发量,实现JavaScript代码的有效开发与管理。 2.使用RSH框架实现Ajax系统中的客户端状态保存和模拟浏览器的后退前进功能。 在选择前端布局时,DIV布局方式是一种更加明智...

    Ajax技术详细代码实例《Ajax实例入门》

    在JSP中,可以使用`&lt;jsp:include&gt;`或自定义标签库(Tag Library)来实现Ajax功能。JSP页面通常包含一个隐藏的iframe,用于接收Ajax响应。通过JavaScript控制iframe的src属性,发起Ajax请求,并处理响应。 ```jsp &lt;!...

    基于bootstrap页面渲染的问题解决方法

    这些部分通常会被拆分成单独的HTML文件,然后通过服务器端的包含指令(如PHP的`include`)或者客户端的模板引擎(如AngularJS的`ng-include`)组合在一起。在这个场景下,问题在于如何在切换页面时只刷新主要内容...

    两个JSP页面父页面获取子页面内容的两种方法

    缺点是不确定iframe是否支持延迟加载,若iframe加载了整个页面内容,那么它并不比include标签好,因为它仍然会导致页面加载缓慢,同时如果要实现单个元素的获取,可能需要对iframe的内容进行额外的查询操作。...

    python入门到高级全栈工程师培训 第3期 附课件代码

    08 django模板之继承标签extend和添加标签include 第51章 01 数据库表与表之间的一对多多对多的关系 02 Django的ORM的概念 03 ORM对单表的增删改操作 04 ORM查询API 05 模糊查询之万能的双下换线 第52章 01 上节...

    Discuz7.2 IE9兼容性写法 杜工完全修补方案

    为了解决AJAXPOST函数和动态创建iframe时存在的兼容性问题,需要修改`include/js/common.js`中的相关函数。 - AJAXPOST函数的修改主要是为了解决在IE9中AJAXPOST可能无法正常触发的问题。以下是修改后的`ajaxpost`...

Global site tag (gtag.js) - Google Analytics