0
J'ai le problème suivant.style.display et href value = #
J'ai une page qui ajoute dynamiquement des iFrames en utilisant jQuery.
A l'intérieur du contenu de certains iFrames il y a des hyperliens comme:
<a href="#" onclick="hideTestDiv();">
la fonction hideTestDiv fait:
...
document.getElementById('test').style.display = 'none';
..
dans IEs navigateurs, la page principale défile vers le haut et le premier élément du la page principale disparaît.
Je ne sais pas comment résoudre ce problème car je ne peux pas modifier le contenu des iFrames.
J'apprécie vraiment toute aide.
Le prochain est un exemple pour reproduire le bug.
La page principale:
<!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></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>
l'iframe avec 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>
Cela ne fonctionnera pas, sauf si vous renvoyez également la valeur de la fonction à l'événement, comme dans 'onlick =" return hideTestDiv(); "'. –
Doh, tu as raison! Cela m'apprendra à faire trop de choses à la fois! J'ai édité ma réponse pour le faire de la manière la plus simple :-) – Ash