Способ не отображать веб-страницу в Internet Explorer, пока не разрешен JavaScript?

Question

Способ не отображать веб-страницу в Internet Explorer, пока не разрешен JavaScript?

0

Я создал простую страницу, которая отображает текст и различные форматированные элементы, а также фотогалерею. В галерее есть горизонтальная полоса прокрутки под большим изображением. Область прокрутки содержит эскизы, которые загружаются в большую область изображения после их нажатия. Это отлично работает в Chrome, Firefox и Safari.

Однако в Internet Explorer JavaScript сначала блокируется, и пользователь должен разрешить ему запускать. До того, как пользователь разрешил JavaScript, страница отображается в фоновом режиме, но форматирование для фотогалереи неверно, поскольку оно зависит от заблокированного JavaScript (более крупные изображения, которые в настоящее время скрыты, отображаются на странице вниз, и это выглядит плохо). Есть ли обходной путь, когда я вообще не показываю веб-страницу до тех пор, пока JavaScript не будет разблокирован или, возможно, еще одно простое решение?

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

 <title>index</title>        
 <style type="text/css">    
  body {            
        /*font-size:12px; modify this within each element*/
    }

 #wrapper {
    width:950px;
    height:800px;
    margin-left:5px;
    margin-top:5px;
    border-top:2px solid #bbb;
    border-bottom:2px solid #bbb;
    border-right:5px solid #000000;
    border-left:5px solid #000000;
    padding:0px;
    }

#topwrap {      
    width:950px;
    height:50px;
    }        

#topturqsq {      
    float:left;
    width:250px;
    height:50px;
    background-color:#7ECCC0;
    }

#topartdeco{     
    float:left;
    width:698px;
    height:48px;
    background-color:#FA8072;
    padding:1px;                            
}

#aptname{
    float:left;
    width:248px;
    height:149px;
    border-bottom:1px solid #bbb;
    vertical-align:top;    
}

#contactbanner{    
    float:left;
    width:690px;
    height:29px;
    border-bottom:1px solid #000000;
    text-align:right;
    font-size:20px;
    padding-right: 10px;
    padding-top:10px;
    font-family:arial,helvetica,sans-serif;     
}

#photogallery{
    width:698px;
    height:555px;
    border-bottom:1px solid #bbb;
    float:left;                         
}

#maintext{      
    font-size:15px;
    font-family:arial,helvetica,sans-serif;   
}

ul{
    list-style-type:none;
    margin:10;
    padding:0;
    vertical-align:top;
    position:relative;          
}    

a{
    display:block;
    color:#000000;
    text-decoration:none;    
}          

#leftnav{
    position:relative;
    width:248px;
    height:600px;
    font-size:20px; 
    float:left;
    font-family:arial,helvetica,sans-serif;             
}

#leftwrap{
    position:relative;
    float:left;
    width:249px;
    height:750px;
    border-right: 1px solid black;        
}   

#linkDiv{       
    width:698px;
    height:120px;
    overflow:auto;
    white-space:nowrap;
    border: 1px solid black;
    float:left;
    padding-top:15px;    
}

#divLinks{              
    float:left;             
}    
#container1,#container2,#container3,#container4,#container5,#container6,#container7,#container8{        
    width:500px;
    height:375px;
    margin:0 auto;
    padding-left:95px;
    padding-top:20px;
    padding-bottom:20px;            
}   

</style>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155

function showDiv(idInfo) {
  var sel = document.getElementById('divLinks').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById('container'+idInfo).style.display = 'block';
  return false;
}
</script>

</head>

<body>          

<div id="wrapper">    
    <div id="topwrap">                    
        <div id="topturqsq">

        </div>

        <div id="topartdeco">               
            <img src="images/artdeco.png" width="349" align="left"> <img src="images/artdeco.png" width="349" align="right">

        </div>
    </div>

    <div id="leftwrap">
        <div id="aptname">
            <img style="position:relative; top:15px; left:0px;"  src="images/banner.png" width="248" >

        </div>
        <div id="leftnav">

            <ul>        
            <li><a href="index.html" style="text-align:center;">Home</a></li>
            <li><a href="index.html" style="text-align:center;">Amenities</a></li>
            <li><a href="index.html" style="text-align:center;">Nearby</a></li>
            <li><a href="index.html" style="text-align:center;">Photos</a></li>
            <li><a href="index.html" style="text-align:center;">Lease</a></li>
            <li><a href="index.html" style="text-align:center;">Contact US</a></li> <br>
            <li><span  style="text-align:center;display:block;text-decoration:underline">Floor Plans </span></li>
            <li><a href="index.html" style="text-align:center;">2 Bedroom</a></li>
            <li><a href="index.html" style="text-align:center;">1 Bedroom</a></li>
            <li><a href="index.html" style="text-align:center;">Corporate</a></li>
            <li><a href="index.html" style="text-align:center;">Efficiency</a></li>
            </ul>   
        </div>
    </div>
    <div id="contactbanner">
        <img src="images/phone.png" height="20" > Call us: (555) 555 - 5555 

    </div>
    <div id="photogallery">

        <div id="divLinks">
            <div id="container1"><img src="images/Chrysanthemum.jpg" width="500" height="375" border="1"></div>
            <div id="container2"><img src="images/Desert.jpg" width="500" height="375" border="1"></div>
            <div id="container3"><img src="images/Hydrangeas.jpg" width="500" height="375" border="1"></div>
            <div id="container4"><img src="images/Jellyfish.jpg" width="500" height="375" border="1"></div>
            <div id="container5"><img src="images/Koala.jpg" width="500" height="375" border="1"></div>
            <div id="container6"><img src="images/Lighthouse.jpg" width="500" height="375" border="1"></div>
            <div id="container7"><img src="images/Penguins.jpg" width="500" height="375" border="1"></div>
            <div id="container8"><img src="images/Tulips.jpg" width="500" height="375" border="1"></div>

        </div>
        <script type="text/javascript">
        window.onload = function() { showDiv('1'); }
        </script>
        <div id="linkDiv">
            <a href="#" onclick="return showDiv('1')"  style="display:inline"><img src="images/Chrysanthemum.jpg" width="120" height="90"></a>
            <a href="#" onclick="return showDiv('2')"  style="display:inline"><img src="images/Desert.jpg" width="120" height="90"></a>
            <a href="#" onclick="return showDiv('3')"  style="display:inline"><img src="images/Hydrangeas.jpg" width="120" height="90"></a>
            <a href="#" onclick="return showDiv('4')"  style="display:inline"><img src="images/Jellyfish.jpg" width="120" height="90"></a>
            <a href="#" onclick="return showDiv('5')"  style="display:inline"><img src="images/Koala.jpg" width="120" height="90"></a>
            <a href="#" onclick="return showDiv('6')"  style="display:inline"><img src="images/Lighthouse.jpg" width="120" height="90"></a>
            <a href="#" onclick="return showDiv('7')"  style="display:inline"><img src="images/Penguins.jpg" width="120" height="90"></a>
            <a href="#" onclick="return showDiv('8')"  style="display:inline"><img src="images/Tulips.jpg" width="120" height="90"></a>
        </div>
    </div>
    <div id="maintext">
    <strong>heading</strong>

<blockquote>bunch of text</blockquote>

    </div>                      
</div>    

</body>
</html>

Seth Myers 18 фев. 2014, в 01:46

Источник

Теги:

javascript

html

css

1 ответ

Ещё вопросы

Casey Dwayne · Answer 1 · 2014-02-17T22-14-00.000Z

0

Думаю, в теории вы могли бы * { display:none; } * { display:none; } чтобы скрыть все, а затем вернуть его, когда JS будет принят. Предполагая, что версия IE поддерживает подстановочный знак (*) в CSS.

Обновление: поскольку вы делаете это с заголовком. Я просто собираюсь предположить, что у него есть идентификатор заголовка.

<div id="header" style="display:none;">CONTENT</div>
<script type="text/javacript">
  window.onload = function(){ 
    var h = document.getElementById('header');
        h.style.display = 'block'; 
  }
</script>

Casey Dwayne 17 фев. 2014, в 22:14

1

Все в теле. Итак, body { display:none; } Или непосредственно в html <body style="display:none"> .
allcaps 18 фев. 2014, в 00:32
0

Это тоже. Вероятно, более эффективный / меньше нагрузки.
Casey Dwayne 18 фев. 2014, в 00:32
0

Спасибо kcdwayne. Я попробую это. Где именно я должен разместить {display: none;} и затем отобразить изменения, как только javascript будет принят? Я предполагаю, что display: none будет идти в начале тела, а затем модификация display: свойство будет идти в пределах JavaScript, который должен быть принят ??
Seth Myers 18 фев. 2014, в 00:35
0

Я разместил дисплей: нет; в шапке в css для тела. Теперь он не отображает ничего, как ожидалось. Как мне отменить это, когда мои условия (javascript запущен) выполнены так, что страница загружается?
Seth Myers 18 фев. 2014, в 00:39
0

window.onload(function(){document.getElementByID('header').style.display = 'block'})
Casey Dwayne 18 фев. 2014, в 00:50
0

Спасибо kc, но я очень плотный, потому что я только начал с html, css и javascript 1 неделю назад. Можете ли вы написать простой код, в котором вы явно скажете мне, где разместить вышеуказанный код, а также начальный экран: нет; что скрывает? На данный момент у меня есть код, который вы вставили в javascript, который находится в заголовке, но ничего не происходит (никогда не включается отображение). Я не знаю достаточно написать сейчас, чтобы эффективно отлаживать эти вещи.
Seth Myers 18 фев. 2014, в 00:55
0

Обновленный код Раньше jquery забыл правильный вызов для onload
Casey Dwayne 18 фев. 2014, в 01:20
0

Будьте осторожны с применением этого на всю страницу. Лучше стилизовать все содержимое вашей страницы, чтобы выглядеть разумно отключенными JS-ситуациями. Чем использовать приемы из этого ответа для улучшения страницы для пользователей, которые имеют JS. Подумайте, что произойдет, если у вашего пользователя нет выбора, он не понимает сообщение «Вы должны включить JS» или JS выключен по своим собственным причинам? Вы будете скрывать действительный контент. Лучше менее красивый стиль, чем нет! Правильно?
allcaps 18 фев. 2014, в 07:52
0

Спасибо, все заглавные буквы. Однако я не знаю, как сделать фотогалерею без использования JavaScript. Я должен изучить это.
Seth Myers 20 фев. 2014, в 09:07
0

@SethMyers Я не уверен, что у вас происходит, но вот несколько советов. Использование ID как правило, плохая идея, если только он не уникален на 100% и вам не нужно назначать много стилей или уникальную функциональность. , В противном случае вы должны действительно использовать классы, так как они могут повторяться. Вы можете иметь только 1 из каждого уникального идентификатора, ∞ классов. Что касается галереи, существует множество «плагинов», с которых вы можете начать. В конце концов вы можете обнаружить, что проще просто запрограммировать javascript / jquery, но вы можете избежать многих проблем, читая лучшие практики и изучая ООП. - мои 2 цента
Casey Dwayne 20 фев. 2014, в 18:20

Показать ещё 8 комментариев