代码之家  ›  专栏  ›  技术社区  ›  GetFree

如何防止IE仅使用HTML/CSS加载隐藏内容?

  •  1
  • GetFree  · 技术社区  · 17 年前

    当您将HTML元素设置为 display: none ,在该元素被设置为显示之前,该元素中的内容(如图像和Flash)不会被Firefox加载。 但是Internet Explorer并没有这样的行为。它从一开始就加载隐藏元素中的所有内容。

    有没有一种方法可以防止IE在不使用JavaScript的情况下加载此类内容?

    6 回复  |  直到 17 年前
        1
  •  3
  •   ZippyV    17 年前

    不要在该元素中插入任何内容?只有当用户设置为可见时,才使用Ajax加载它。

        2
  •  3
  •   GetFree    16 年前

    由于我的问题是一个不使用JavaScript的解决方案,所以我会回答我自己的问题,并说目前还没有办法阻止IE加载作为隐藏内容一部分的外部文件。

    正如其他答案所暗示的,有一些方法可以避免这个问题,但不能解决它。所以我具体问题的答案是“不”。

        3
  •  1
  •   Art    16 年前

    实际上,如果你把可视性设为隐藏(即不加载)。

        4
  •  0
  •   robnardo    16 年前

    下面是Zippyv所说的一个例子(有点扭曲)。复制并粘贴下面的代码到一个具有HTML扩展名的新文件中,然后运行它!

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
    <h1>This is the title</h1>
    <p>This is a paragraph</p>
    <div id="hidden-content"></div>
    <p>Another paragraph</p>
    <input type="button" id="add-content" value="Add Hidden Content" />
    
    <script type="text/javascript">
        $(document).ready(function() {
            $("#add-content").click(
                function() {
                    var info = unescape('%53%68%68%68%2E%2E%2E%20%73%65%63%72%65%74%20%69%6E%66%6F%72%6D%61%74%69%6F%6E');
                    $("#hidden-content").html(info);
                }
            );
        });
    </script>
    
    </body>
    </html>
    

    关键是要显示的隐藏内容首先被转义(使用javascript escape()函数)。另外,您可以将javascript放在单独的文件中!

        5
  •  -1
  •   Rory McCrossan Hsm Sharique Hasan    13 年前

    display: none 应该将元素内容隐藏在IE和任何其他浏览器中。

    你关上所有的标签了吗?

        6
  •  -1
  •   Capes    12 年前
    function hide_show_content(el_ID){
    
            //try <element hidden> property NOT IExplorer
            try{el_ID.hidden = ((el_ID.hidden) ? false : true);}catch(_e){}
            //try style=display:none for IExplorer
            try{
                if(el_ID.style.display==""){return;}
                el_ID.style.display = ((el_ID.style.display=="none") ? "inherit" : "none");
            }catch(_e){}
    
        }
    
    
    
    <span id="text#1"  style="display:none;" hidden>TEXT TO BE HIDDEN or SHOWN laiter.</span>
    
    <a href="" onClick="hide_show_content(document.getElementById('text#1')); return false;">Click to show TEXT</a>