style.display and href value = #
I have the following problem.
I have a page that adds iFrames dynamically using jQuery.
Inside of the content of some iFrames there are hyperlinks like:
<a href="#" onclick="hideTestDiv();">
the function hideTestDiv does:
...
document.getElementById('test').style.display = 'none';
..
in IEs browsers, this causes the main page to scroll right to top and the first element of the main page disappears.
I dont know how to fix this because i can't modify the content of the iFrames.
I really appreciate any help.
The next is a example to reproduce the bug.
The main page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamic tabs with jQuery - why and how to create them | JankoAtWarpSpeed Demos</title>
<style type="text/css">
body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
#tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
#tabs li { float:left; display:block; padding:5px; background-color:#bbb; margin-right:5px;}
#tabs li a { color:#fff; text-decoration:none; }
#tabs li.current { background-color:#e1e1e1;}
#tabs li.current a { color:#000; text-decoration:none; }
#tabs li a.remove { color:#f00; margin-left:10px;}
#content { width:100%; height:100%; background-color:#e1e1e1;}
#main { width:900px; height:100%; margin:0px auto; overflow:hidden;background-color:#F6F6F6; margin-top:0px;
-moz-border-radius:10px; -webkit-border-radius:10px; padding:0px;}
#wrapper, #doclist { float:left; margin:0 20px 0 0;}
#doclist { width:70px; border-right:solid 1px #dcdcdc;}
#doclist ul { margin:0; list-style:none;}
#doclist li { margin:10px 0; padding:0;}
#documents { margin:0; padding:0;}
#wrapper { width:100%; height:500px; margin-top:0px;}
#header{ background-color:#F6F6F6; width:900px; margin:0px auto; margin-top:0px;
-moz-border-radius:10px; -webkit-border-radius:10px; padding:30px; position:relative;}
#header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}
</style>
<script type="text/javascript" src="Dynamic%20tabs%20with%20jQuery%20_archivos/jquery-1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#documents a").click(function() {
addTab($(this));
});
$('#tabs a.tab').live('click', function() {
// Get the tab name
var contentname = $(this).attr("id") + "_content";
// hide all other tabs
$("#content iframe").hide();
$("#tabs li").removeClass("current");
// show current tab
$("#" + contentname).show();
$(this).parent().addClass("current");
});
$('#tabs a.remove').live('click', function() {
// Get the tab name
var tabid = $(this).parent().find(".tab").attr("id");
// remove tab and related content
var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();
// if there is no current tab and if there are still tabs left, show the first one
if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
// find the first tab
var firsttab = $("#tabs li:first-child");
firsttab.addClass("current");
// get its link name and show related content
var firsttabid = $(firsttab).find("a.tab").attr("id");
$("#" + firsttabid + "_content").show();
}
});
});
function addTab(link) {
// If tab already exist in the list, return
if ($("#" + $(link).attr("rel")).length != 0)
return;
// hide other tabs
$("#tabs li").removeClass("current");
$("#content iframe").hide();
// add new tab and related content
$("#tabs").append("<li class='current'><a class='tab' id='" +
$(link).attr("rel") + "' href='#'>" + $(link).html() +
"</a><a href='#' class='remove'>x</a&开发者_如何学Cgt;</li>");
$("#content").append("<iframe width='100%' height='100%' frameborder='0' id='" + $(link).attr("rel") + "_content' src='"+
$(link).attr("title") + "'/>");
// set the newly added tab as current
$("#" + $(link).attr("rel") + "_content").show();
}
</script>
</head><body bgcolor="#F8F7F6">
<div id="main">
<div id="dummy">
should not dissapear
</div >
<div id="doclist">
<ul id="documents">
<li><a href="#" rel="Servicio1" title="tab_content.html">service 1</a></li>
<li><a href="#" rel="Servicio2" title="http://developer.yahoo.com/yui/">service 2</a></li>
<li><a href="#" rel="Servicio3" title="http://www.facebook.com/">service 3</a></li>
<li><a href="#" rel="Servicio4" title="http://www.save-ass.com/code/2010/01/28/pestanas-dinamicas-con-jquery/">service 4</a></li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
</div>
</body></html>
the iframe with url=# (tab_content.html)
<html>
<head>
<title>JavaScript Popup Example 3</title>
<script type="text/javascript" src="Dynamic%20tabs%20with%20jQuery%20_archivos/jquery-1.js"></script>
<script language="JavaScript" type="text/javascript">
function hideTestDiv() {
document.getElementById('test').style.display = 'none';
}
function showTestDiv() {
document.getElementById('test').style.display = 'block';
}
</script>
</head>
<body >
<a href="#" onclick="hideTestDiv();"> hide test div </a>
<br>
<a href="#" onclick="showTestDiv();"> show test div </a>
<br>
<div id="test"> some content to hide or show</div>
</body>
</html>
Just add return false; after the hideTestDiv(); -- that prevents the click event from happening and the href from being called.
You need to return false after your call to hideTestDiv function like so:
<a href="#" onclick="hideTestDiv(); return false;">
otherwise after your onClick javascript is executed the link is followed (a link to # is a link to the current page - some browsers will jump back to the top of the page when you follow such a link)
Thanks for yours answers.
I have resolved this issue:
In the javascript function called addTab, after the next line:
$("#" + $(link).attr("rel") + "_content").show();
I added the folloging code:
$("#" + $(link).attr("rel") + "_content").load(
function(){
$("#" + $(link).attr("rel") + "_content")
.contents().find('a[href=#]')
.bind('click',function (event) { event.preventDefault();});
}
);
I had to do that because in the real case, I don't have permissions to add code directly in the content of the iframes.
Another option is to intercept the click event on the iframe and stop it from affecting the parent frame with something like this:
$("#content iframe").live('click', function (e) {
e.preventDefault();
});
That will also prevent clicks in the iframes from affecting the parent via something like:
<a href="malicioussite.com?s=innocentsite.com" target="_top">InnocentSite.com</a>
Or something like:
<a href="#top">Top</a>
Anyway, whatever works, right?
加载中,请稍侯......
精彩评论