Не показывать сайт с начальной загрузкой в ​​IE - PullRequest
Новая
       9

Не показывать сайт с начальной загрузкой в ​​IE

0 голосов
/ 02 июля 2018

Я использую Bootstrap и Vuejs и Laravel на моем веб-сайте. Все в Chrome и Firefox в порядке, но когда я использую IE, отображается пустая страница без каких-либо ошибок. Когда я отключу загрузчик Css (не начальной загрузки JS), все будет в порядке. Я тестировал на IE 11. Я сделал несколько фотографий почти каждой части элемента проверки и консоли IE, которую я отправил вам.

первая часть проверки элемента

вторая часть проверяющего элемента

третья часть проверяющего элемента

последняя часть проверяющего элемента

консоль IE

Привет

1 Ответ

0 голосов
/ 02 июля 2018

Должно быть более чистое решение, но вот мой вклад.

Я использовал свойство .disabled для отключения link в Javascript.

Код сначала проверяет, используете ли вы IE, и соответственно отключается.

Возиться с индексом link, чтобы найти bootstrap.min.css. 

// disables all styles in the document
function unloadStyleSheet(DOMelement) {
    DOMelement.disabled = true;
    DOMelement.parentNode.removeChild(DOMelement);
}

// Sample function that returns boolean in case the browser is Internet Explorer
function isIE() {
    ua = navigator.userAgent;
    // MSIE used to detect old browsers and Trident used to newer ones
    var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;

    return is_ie;
}

// Disable CSS if IE
if (isIE()) {
    console.log(document.getElementsByTagName('link')[0]);
    unloadStyleSheet(document.getElementsByTagName('link')[0]);
} else {
  // Remove comments if you want to test in chrome
  //unloadStyleSheet(document.getElementsByTagName('link')[0]);
}
.container {
    border: 1px solid;
}

[class^='col-'] {
	border: 1px dashed;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-md-12">Hey</div>
    </div>
    <div class="row">
        <div class="col-md-12">Hey</div>
    </div>
    <div class="row">
        <div class="col-md-12">Hey</div>
    </div>
    <div class="row">
        <div class="col-md-12">Hey</div>
    </div>
</div>
...