`

jquery 修改iframe src

 
阅读更多

author liuqing

 

	$('#username').attr("src","http://www.dangdang.com");

 

 

修改iframe 对应的内容

 

json tree 添加链接格式 "attributes":{"url":"usermanager/add.action"}

添加链接

 

[{   
    "id":1,   
    "text":"Folder1",   
    "iconCls":"icon-save",   
    "children":[{   
        "text":"File1",   
        "checked":true  
    },{   
        "text":"Books",   
        "state":"open",  
        "children":[
        {   
            "text":"PhotoShop",   
            "checked":true , 
            "attributes":{
            	"url":"http://www.dangdang.com"
            }
        }
        
        ]   
    }]   
},{   
    "text":"Languages",   
    "state":"closed",   
    "children":[{   
        "text":"Java" ,
        "attributes":{
            	"url":"http://www.dangdang.com"
            }
    },{   
        "text":"C#"  
    }]   
}]   

 

实现代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="sx" uri="/struts-tags-zk" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<sx:head/>
<script type="text/javascript">
$(function(){
	$('#username').css({height:$(window).height()- 30});
	$('#tt22').tree({   
	    url:'data.json',
	    animate:true,
	    onClick:function(node) {
	    	var url = node.attributes.url;
	    	if (url) {
	    		$('div.datagrid-mask').css({
	    			height:$(window).height(),
	    			display:"block"});
	    		$('div.datagrid-mask-msg').css({
	    			left:$(document.body).outerWidth(true) / 2,
	    			top:$(window).height()/2 - 20,
	    			display:"block"
	    		});
	    		$('#username').attr("src",url);
	    		clear();
	    	}
	    }
	});
});
function clear() {
	//这时使用 load(function{});
	//当加载成功后就动行function() 
	$('#username').load(function(){
		$('div.datagrid-mask').css({display:"none"});
		$('div.datagrid-mask-msg').css({display:"none"});
	});
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<div class="datagrid-mask" style="display:none;width:100%"></div>
<div class="datagrid-mask-msg" 
style="font-size:12px;margin:auto;text-align:center;">正在加载</div>

<ul id="tt22"></ul>
<iframe id="username" frameborder="0" src="http://www.baidu.com" 
style="width:100%;height:100%;"></iframe>

</body>
</html>

 

 

分享到:
评论
2 楼 lhb319lhb 2015-09-10  
如果 ajax(jquery)更新了 iframe 的 src值, url是通过后台链接跳转的jsp,设置后 页面不刷新,

手动设置刷新也没数据。
1 楼 liu152305 2015-06-04  
.....如果路径是中文肿么解决啊?

相关推荐

    JQUERY实现iframe页面切换功能

    `switchPage`函数负责改变iframe的`src`属性,从而加载新的页面。我们用`index`变量记录当前页面的位置,并使用模运算符实现循环切换。`#switchBtn`是切换按钮的ID,你可以根据实际需求更改或添加其他触发事件。 ...

    捕捉IFrame SRC改变事件

    - JavaScript函数`showBPage()`和`showAPage()`分别用于修改`&lt;iframe&gt;`的`src`属性。 - **a.html**: - 在头部通过`&lt;script&gt;`标签定义了`onbeforeunload`事件处理程序。当用户试图离开该页面时,会弹出一个确认...

    Jquery实现iframe功能

    然后,我们可以通过jQuery来动态改变iframe的src属性,实现加载不同页面的功能。例如,当用户点击一个按钮时,我们可以这样做: ```javascript $("#loadButton").click(function() { var url = ...

    两个jquery实现iframe多标签页例子

    对于iframe的支持,可能包括在切换标签时动态修改iframe的`src`属性,以加载相应页面。 在实际应用中,你需要将这两个示例集成到你的ASP.NET项目中。这通常涉及到在HTML中引入jQuery库和相关的标签页插件脚本,设置...

    Jquery取得Iframe中元素的几中方法

    - **修改元素属性**:例如,`$("#iframe1").contents().find("#d1").css('color','red')` 可以改变 id 为 "d1" 的元素的字体颜色。 - **改变 input 元素的样式**:使用 `$(window.frames["iframe1"].document)....

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    接着,我们在页面加载完成时和窗口大小改变时调用这个方法,确保在任何情况下`iframe`都能正确调整高度。如果`iframe`的内容加载有延迟,我们还可以通过监听`load`事件,在内容完全加载后进行调整。 此解决方案考虑...

    详解iframe的src指向的内容不刷新的解决办法

    iframe的src的值发生改变,才会刷新iframe里面的内容. 所以虽然我代码的url对应的页面有变化了,可是url一直不变,也就是iframe的src的值一直没变.所以不刷新内容; 解决办法 原因找到了,解决就非常容易了.想任何一种...

    JQUERY设置IFRAME的SRC值的代码

    代码如下:$(window.parent.document).find... leftiframe中jQuery改变mainiframe的src代码: $(“#mainframe”,parent.document.body).attr(“src”,”//www.jb51.net “) 2 如果内容里面有一个ID为mainiframe的ifame

    jQuery获取iframe的document对象的方法

    需要注意的是,由于浏览器的安全策略,如果`iframe`的源(src)与包含它的页面不在同一个域名下,那么你将无法通过JavaScript访问`iframe`的`document`对象。这种现象被称为跨域限制,遵循同源策略。除非服务器设置...

    jQuery内嵌iframe导航菜单特效源码.zip

    这通常通过修改iframe的`src`属性来实现。 5. **高亮当前选中项**:为了反馈用户当前所在的位置,还需要更新导航菜单的样式,使被点击的链接具有不同的视觉效果,如改变背景色或添加边框。 6. **优化性能**:为了...

    jquery操作 iframe的方法

    接下来,我们来看看如何通过jQuery改变iframe的src属性。src属性是iframe元素中用于指定加载内容地址的属性。通过jQuery的attr()方法,我们可以轻松地更改这一属性来指定新的URL。例如,若要将页面中某个具有特定ID...

    jQuery内嵌iframe导航菜单

    2. iframe 与导航菜单的关联:在点击导航菜单项时,可以通过jQuery动态更改iframe的 `src` 属性,加载相应的子页面。例如,`$("#iframeId").attr("src", "subpage.html")`。 3. 跨域问题:需要注意的是,由于同源...

    iframe对另一个iframe控制的Demo

    本实例“iframe对另一个iframe控制的Demo”展示了如何通过JavaScript或者jQuery实现一个iframe对另一个iframe的交互,以及如何控制iframe的显示与隐藏。这种技术广泛应用于构建复杂的Web应用程序,如页面内的多窗口...

    jquery树形菜单+iframe显示实例

    在这个实例中,可能使用了jQuery的`.click()`事件监听器来响应用户的点击操作,并根据选中的菜单项来改变iframe中的内容。 接着,我们谈谈iframe。iframe,即内联框架,允许在一个HTML文档内部嵌入另一个HTML文档。...

    jQuery判断iframe中元素是否存在的方法

    `iframe`通常通过`src`属性指定其加载的页面URL。 要使用`jQuery`判断`iframe`中的元素是否存在,我们需要先获取`iframe`的`window`对象和`document`对象,然后像操作主页面的DOM一样操作`iframe`的DOM。以下是一个...

    jQuery控制iFrame(实例代码)

    例如,改变iFrame的`src`属性: ```javascript $("#iframe1").attr("src", "newpage.html"); ``` 或者修改iFrame内特定元素的样式: ```javascript $("#iframe1").contents().find("#elementID").css({...

    JQuery判断子iframe何时加载完成解决方案

    然后,通过更改iframe的src属性来改变iframe所加载的页面。更改src属性后,我们绑定一个函数到.load()事件上,这个函数会在iframe内容加载完成后执行。在该函数内部,我们将标志变量isOnLoad设置为false,并执行加载...

    jquery 操作iframe的几种方法总结

    总之,jQuery为开发者提供了便捷的方式来操作`iframe`,包括获取和设置内容、选择和修改元素、以及触发事件等。合理运用这些技巧,可以有效提高开发效率,实现复杂的页面交互。但同时,要注意浏览器兼容性和同源策略...

Global site tag (gtag.js) - Google Analytics