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?

style.display and href value = #

精彩评论

关注公众号

热门标签

图文推荐

style.display and href value = #

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：