style.display 和 href 值 = #答案

【问题标题】：style.display and href value = #style.display 和 href 值 = #
【发布时间】：2011-04-15 06:46:41
【问题描述】：

我有以下问题。

我有一个使用 jQuery 动态添加 iFrame 的页面。

在某些 iFrame 的内容中，有如下超链接：

  <a href="#" onclick="hideTestDiv();">

函数 hideTestDiv 所做的：

...

document.getElementById('test').style.display = 'none';

在 IE 浏览器中，这会导致主页向右滚动到顶部，并且主页的第一个元素会消失。

我不知道如何解决这个问题，因为我无法修改 iFrame 的内容。

非常感谢任何帮助。

接下来是重现该错误的示例。

主页：

<!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>

带有 url=# (tab_content.html) 的 iframe

<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>

【问题讨论】：

标签： jquery iframe dhtml

【解决方案1】：

只需在hideTestDiv(); 之后添加return false; -- 这样可以防止点击事件发生并且不会调用href。

【讨论】：

【解决方案2】：

您需要在调用 hideTestDiv 函数后返回 false，如下所示：

<a href="#" onclick="hideTestDiv(); return false;">

否则在您的 onClick javascript 执行后，该链接将被跟随（指向 # 的链接是指向当前页面的链接 - 当您点击此类链接时，某些浏览器会跳回页面顶部）

【讨论】：

除非你也将函数的值返回给事件，否则这是行不通的，如onlick="return hideTestDiv();"。
哦，你是对的！那会教我一次做太多事情！我已经编辑了我的答案以更简单的方式:-)

【解决方案3】：

感谢您的回答。

我已经解决了这个问题：

在名为 addTab 的 javascript 函数中，在下一行之后：

$("#" + $(link).attr("rel") + "_content").show();

我添加了以下代码：

$("#" + $(link).attr("rel") + "_content").load(
            function(){
              $("#" + $(link).attr("rel") + "_content")
              .contents().find('a[href=#]')
              .bind('click',function (event) { event.preventDefault();});
            }
            );

我必须这样做，因为在实际情况下，我无权直接在 iframe 的内容中添加代码。

【讨论】：

【解决方案4】：

另一种选择是拦截 iframe 上的点击事件并阻止它影响父框架，如下所示：

            $("#content iframe").live('click', function (e) {
                e.preventDefault();
            });

这也将防止 iframe 中的点击通过以下方式影响父级：

<a href="malicioussite.com?s=innocentsite.com" target="_top">InnocentSite.com</a>

或者类似的东西：

<a href="#top">Top</a>

不管怎样，不管用，对吧？

【讨论】：