jQuery弹出层获取页面iframe的问题

chl19871024 2010-02-02 03:56:14

如图片所示
顶部和左边是固定页面 中间嵌套个iframe 访问action
我想做个类似于 MSDN登陆 或者百度知道登陆的那种 已经实现但是因为它是在iframe 页面内获取的ID值 所以阴影部只能覆盖iframe 页面 在网上查找解决方案 发现了可以用 $("#iframe").contents().find(控件名或者ID值)再整页面中找到iframe的内容 也实现了我想要的效果。 但是iframe嵌套的页面内容并不固定一旦iframe页面内容产生了变化就无法再次找到iframe页面的内容 不知道有什么解决方法没有
部分代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>测试页面2</title>

<link rel="stylesheet" href="css/tipswindown.css" type="text/css">

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/tipswindown.js"></script>

<script>

	$(function() {

		$("#iframe").contents().find("#add").click(function() {

			tipsWindown("添加企业名片","iframe:http://www.qq.com","700","400","true","","true","");

		});

	});

	

</script>

</head>

<body>



<iframe id="iframe" name="iframe" frameborder="0" width="800" height="500" src="login.html">

</iframe>

</body>

</html>


login.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>登陆</title>

</head>

<body>

<img src="images/zj.png" id="add" width="56" height="22" border="0"/>

</body>

</html>

tipswindown.js
///-------------------------------------------------------------------------

//jQuery弹出窗口 By Await [2009-11-22]

//--------------------------------------------------------------------------

/*参数：[可选参数在调用时可写可不写,其他为必写]

----------------------------------------------------------------------------

    title:	窗口标题

  content:  内容(可选内容为){ text | id | img | url | iframe }

    width:	内容宽度

   height:	内容高度

	 drag:  是否可以拖动(ture为是,false为否)

     time:	自动关闭等待的时间，为空是则不自动关闭

   showbg:	[可选参数]设置是否显示遮罩层(0为不显示,1为显示)

  cssName:  [可选参数]附加class名称

 ------------------------------------------------------------------------*/

 //示例:

 //------------------------------------------------------------------------

 //simpleWindown("例子","text:例子","500","400","true","3000","0","exa")

 //------------------------------------------------------------------------

var showWindown = true;

var templateSrc = "http://leotheme.cn/wp-content/themes/Dreamy"; //设置loading.gif路径

function tipsWindown(title,content,width,height,drag,time,showbg,cssName) {

	$("#windown-box").remove(); //请除内容

	var width = width>= 950?this.width=950:this.width=width;	    //设置最大窗口宽度

	var height = height>= 527?this.height=527:this.height=height;  //设置最大窗口高度

	if(showWindown == true) {

		var simpleWindown_html = new String;

			simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>";

			simpleWindown_html += "<div id=\"windown-box\">";

			simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\">关闭</span></div>";

			simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>"; 

			simpleWindown_html += "</div>";

			$("body").append(simpleWindown_html);//向HTML内追加元素

			show = false;

	}

	

	

	

	

	contentType = content.substring(0,content.indexOf(":"));

	content = content.substring(content.indexOf(":")+1,content.length);

	//遍历获得的内容

	switch(contentType) {

		case "text":

		$("#windown-content").html(content);

		break;

		case "id":

		$("#windown-content").html($("#"+content+"").html());

		break;

		case "img":

		$("#windown-content").ajaxStart(function() {

			$(this).html("<img src='"+templateSrc+"' class='loading' />");

		});

		$.ajax({

			error:function(){

				$("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");

			},

			success:function(html){

				$("#windown-content").html("<img src="+content+" alt='' />");

			}

		});

		break;

		case "url":

		var content_array=content.split("?");

		$("#windown-content").ajaxStart(function(){

			$(this).html("<img src='"+templateSrc+"' class='loading' />");

		});

		$.ajax({

			type:content_array[0],

			url:content_array[1],

			data:content_array[2],

			error:function(){

				$("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");

			},

			success:function(html){

				$("#windown-content").html(html);

			}

		});

		break;

		case "iframe":

		$("#windown-content").ajaxStart(function(){

			$(this).html("<img src='"+templateSrc+"' class='loading' />");

		});

		$.ajax({

			error:function(){

				$("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");

			},

			success:function(html){

				$("#windown-content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+parseInt(height)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");

			}

		});

	}

	$("#windown-title h2").html(title);

	//遮盖层是否弹出

	if(showbg == "true") {$("#windownbg").show();}else {$("#windownbg").remove();};

	$("#windownbg").animate({opacity:"0.6"},"normal");//设置透明度

	$("#windown-box").show();

	if( height >= 527 ) {

		$("#windown-title").css({width:(parseInt(width)+22)+"px"});

		$("#windown-content").css({width:(parseInt(width)+17)+"px",height:height+"px"});

	}else {

		$("#windown-title").css({width:(parseInt(width)+10)+"px"});

		$("#windown-content").css({width:width+"px",height:height+"px"});

	}

	var	cw = document.documentElement.clientWidth,ch = document.documentElement.clientHeight,est = document.documentElement.scrollTop; 

	var _version = $.browser.version;

	if ( _version == 6.0 ) {

		$("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});

	}else {

		$("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});

	};

	var Drag_ID = document.getElementById("windown-box"),DragHead = document.getElementById("windown-title");

		

	var moveX = 0,moveY = 0,moveTop,moveLeft = 0,moveable = false;

		if ( _version == 6.0 ) {

			moveTop = est;

		}else {

			moveTop = 0;

		}

	var	sw = Drag_ID.scrollWidth,sh = Drag_ID.scrollHeight;

		DragHead.onmouseover = function(e) {

			if(drag == "true"){DragHead.style.cursor = "move";}else{DragHead.style.cursor = "default";}

		};

		DragHead.onmousedown = function(e) {

		if(drag == "true"){moveable = true;}else{moveable = false;}

		e = window.event?window.event:e;

		var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;

		moveX = e.clientX-ol;

		moveY = e.clientY-ot;

		document.onmousemove = function(e) {

				if (moveable) {

				e = window.event?window.event:e;

				var x = e.clientX - moveX;

				var y = e.clientY - moveY;

					if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) {

						Drag_ID.style.left = x + "px";

						Drag_ID.style.top = parseInt(y+moveTop) + "px";

						Drag_ID.style.margin = "auto";

						}

					}

				}

		document.onmouseup = function () {moveable = false;};

		Drag_ID.onselectstart = function(e){return false;}

	}

	

	

	

	$("#windown-content").attr("class","windown-"+cssName);

	var closeWindown = function() {

		$("#windownbg").remove();

		$("#windown-box").fadeOut("slow",function(){$(this).remove();});

	}

	if( time == "" || typeof(time) == "undefined") {

		$("#windown-close").click(function() {

			$("#windownbg").remove();

			$("#windown-box").fadeOut("slow",function(){$(this).remove();});

		});

	}else { 

		setTimeout(closeWindown,time);

	}

}

以上页面代码实现的是主页面可以找到嵌套iframe页面中的值 弹出层。 但是如果iframe变化后就找不到了 该如何解决
不知道解释的请不清楚
如有解决方法也可以联系QQ147802609
...全文
8362 21 打赏 收藏 转发到动态 举报
写回复
用AI写文章
21 条回复
切换为时间正序
请发表友善的回复…
发表回复
慕容紫风 2012-05-29
  • 打赏
  • 举报
 回复
学习同求合理方法
jinlin516293816 2011-08-01
  • 打赏
  • 举报
 回复
学习了
daisy_8706 2011-04-25
  • 打赏
  • 举报
 回复
autorun_bob 2010-08-27
  • 打赏
  • 举报
 回复
关注，高手快点支招吧……
zhouyongsheng 2010-08-26
  • 打赏
  • 举报
 回复
我也遇到了关注中。
mogui369 2010-08-14
  • 打赏
  • 举报
 回复
晕死，我也碰到了，不知道怎么解决啊！
扁鵲東南飛 2010-02-22
  • 打赏
  • 举报
 回复


楼主好运，再等等高人吧。

不过你的两个图片都没显示哎。。。
zhuzhupj 2010-02-04
  • 打赏
  • 举报
 回复
学习+接分！
chl19871024 2010-02-04
  • 打赏
  • 举报
 回复
第一个方法应该是不可行的、、、
wenchao_222 2010-02-03
  • 打赏
  • 举报
 回复
两个方法。
一个是在主页面上 始终加载js 也就是每次访问这个主页面。就重新加载ifram 或者 不用iframe
用 <s:include> 这个标签。他是始终镶嵌的
chl19871024 2010-02-03
  • 打赏
  • 举报
 回复
那JS不是我写的 只是重网上找的现成的 然后自己更改了 用了用、、
抽烟殇肺卟殇心 2010-02-03
  • 打赏
  • 举报
 回复
你这么多的JS都写出来了,佩服,帮 你顶
chl19871024 2010-02-03
  • 打赏
  • 举报
 回复
问题简单来说就是 iframe 跨域访问的问题。。。。
abosten_love 2010-02-02
  • 打赏
  • 举报
 回复
没有弄清楚楼主的问题
岁月之梦 2010-02-02
  • 打赏
  • 举报
 回复
这个有点牵强！我全用div 最后只能用ajax！你这样的，左边提交到服务器，返回页面到一个jsp，然后把jsp要放到右边这个div 那你不用ajax的话，还有什么更好的办法，所以最后 感觉都用frame吧！
chl19871024 2010-02-02
  • 打赏
  • 举报
 回复
寻找答案！！！！
chl19871024 2010-02-02
  • 打赏
  • 举报
 回复
坐等高人来回答！
牛叔 2010-02-02
  • 打赏
  • 举报
 回复
给你顶上去
chl19871024 2010-02-02
  • 打赏
  • 举报
 回复
图片失效 这里贴上
xiaoskery 2010-02-02
  • 打赏
  • 举报
 回复
up
layer弹出子iframe层父子页面传值的实现方法
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下： 父页面获取子页面元素 格式： $("#iframeID").contents().find("#eleID") 示例代码： father.html <!DOCTYPE html> <...
超实用的jQuery代码段
1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...
ExtAspNet_v2.3.2_dll
-Grid增加GetNoSelectionAlertInParentReference函数，用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer，...
ExtAspNet v2.2.1 （2009-4-1） 值得一看
-Grid增加GetNoSelectionAlertInParentReference函数，用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer，...
10款jquery弹出层 动画效果应有尽有
jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。...jquery弹出层插件点击按钮背景淡隐淡现显示弹出层，当鼠标滑动标题时，可以拖动整个弹出层，点击按钮关闭弹出层。 ...
Web 开发

81,091

社区成员

341,719

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章