Warum führt meine js mit falschem HTML anders aus?

Ich habe eine Webseite mit jQuery, Bootstrap und 2 verschiedenen jQuery-Plugins. Einer heißt Turn.js und der andere heißt mCustomScrollbar. Vor heute hatte ich serverseitigen Code, der ein Skript-Tag, vor dem <!DOCTYPE html>-Tag, zu jeder Anfrage voranstellen würde. Ich bemerkte auf einer anderen Seite, dass dies ein Problem verursacht, dass jQuery eine falsche Höhe zurückgegeben hat, wenn $(window).height() verwendet wurde, also änderte ich den Code und fand eine Möglichkeit, das Skript-Tag direkt vor das schließende -Tag zu setzen. Dies hat jedoch die Funktionalität der mCustomScrollBar-Bibliothek, die ich verwende, unterbrochenWarum führt meine js mit falschem HTML anders aus?

Aus irgendeinem Grund wird die Bildlaufleiste nicht angezeigt, die Mausradfunktion ist deaktiviert, und das Scrollen ist auf mobilen/Touch-Geräten deaktiviert. Das Plugin wird definitiv ausgelöst, da ich sehen kann, dass das HTML vom Plugin verändert wird.

Also meine Frage ist: Warum funktioniert mein Javascript richtig, oder zumindest wie ich es will, wenn ich falsches HTML habe, aber es funktioniert nicht korrekt, wenn mein Markup korrigiert wird (Kein Text vor dem <!DOCTYPE html> Tag) ?

Relevante Code:

Die HTML-Struktur Ich bin auf das mCustomScrollbar Plugin anwenden. Das übergeordnete Element der #flip-indes Div Bootstrap .container-fluid, die die Seiten Hauptcontainer ist. Ich verwende C# mit Rasierersyntax für meine Ansichten. Ich kann das generierte HTML einer Seite bei Bedarf veröffentlichen.

<div id="flip-index"> 
    <div class="customScrollbar"> 
     @for (var i = 0; i < Model.Pages.Count; ++i) 
     { 
      <div class="index-item" onclick="$('#flipbook').turn('page', @(i + 1));"> 
       <img src="@Config.Get("FlipbookImgURL")@Model.Pages[i].Replace('\\', '/')" alt="Flipbook index preview" onerror="replaceWithText(event);"/> 
       <a class="btn btn-primary full-size-img" href="/FlipBook/[email protected]("FlipbookImgURL")@Model.Pages[i].Replace('\\', '/')" target="_blank" title="View Image Full Size"> 
        <span class="glyphicon glyphicon-eye-open"></span> 
       </a> 
       <div class="index-number">@(i + 1)</div> 
      </div> 
     } 
     <div class="index-pad">&nbsp;</div> 
    </div> 
</div>

Mein $(document).ready()

try 
{ 
    $('.index-item:first-child').addClass('active'); 
    var turnOptions = {}; 
    var width = screenWidth(); 
    $('.main-content').css('padding-top', $('nav.navbar').outerHeight()) 
    $('#flipbook').turn(turnOptions); 
    var firstImage = $('#flipbook img')[0]; 
    if (firstImage.complete || firstImage.naturalHeight > 0) { 
     sizeElements(); 
    } else { 
     firstImage.onload = sizeElements; 
    } 
    $('.customScrollbar').mCustomScrollbar({ 
     theme: 'minimal-light', 
     axis: 'y', 
     mouseWheel: { 
      scrollAmount: ($('#flip-index').outerHeight() * (1/$('.index-item').length)) * 2 
     } 
    }); 

    $('#flip-index').css({ 
     left: parseInt($('.main-content').css('padding-left')) 
    }); 

    // Keep the sidebar and the flipper in sync. 
    $('#flipbook').on('turning', pageTurning); 
    window.addEventListener('resize', windowResize); 

    $('#otherInserts .active, #otherInserts .disabled').on('click', function (e) { 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
    }); 
} 
catch(ex) 
{ 
    alert('There was an error loading this page!'); 
    throw ex; 
} 
finally 
{ 
    // remove loading overlay 
    $('.loading-overlay').fadeOut(function() { 
     $('.loading-overlay').remove(); 
    }); 
}

Es gibt eine ganze Menge mehr js ich auf dieser Seite haben aber nichts davon verweist auf das mCustomScrollbar Plugin so dass ich nicht glaube, es war relevant, und ich don‘ Ich möchte jeden mit unnötigen Informationen überladen. Wenn jemand mehr Code gepostet hätte, würde ich es gerne tun, einfach fragen.

Ich glaube wirklich, die Antwort wird irgendwo innerhalb liegen, wie der Browser mein js oder HTML-Markup basierend darauf interpretiert, ob der Browser in der Lage ist, das HTML zu validieren oder nicht.

Quelle

2016-06-17 Andrew Bonsall

Willkommen zu: Quirksmodus

auf der doctype Je oder deren Fehlen, kann der Browser entweder Standards-Modus oder Quirksmodus. Quirks-Modus dupliziert die Funktionalität von alten Browsern und es wird am besten vermieden.

Da Sie Inhalt vor das Doctype-Tag wiedergeben, nimmt der Browser Macken.

Es gibt eine LOT der Unterschiede zwischen den beiden Modi, aber dies könnte Ihnen den Einstieg:

https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

Neben dieser freundliche Grafik:

http://www.quirksmode.org/css/quirksmode.html

Empfehlung : Vermeiden Sie Quirks-Modus um jeden Preis. Reparieren Sie, was auch immer kaputter Code Ihnen schlechten HTML-Code gibt.

Quelle

2016-06-17 19:11:54

Ich dachte Quirks-Modus war nur für IE. Unabhängig davon, mein Problem ist, dass der Code im Quirks-Modus arbeitet, aber keine Standards. Ich kann nicht herausfinden warum! Mein html Ich bin überzeugt, dass mein HTML korrekt ist, ich habe es durch viele verschiedene Validatoren laufen lassen. –

Wie bei der üblichen Antwort auf meine Frage, habe ich etwas Dummes getan. In diesem Fall habe ich die Funktion mCustomScrollBar für das falsche Element aufgerufen. Ich denke, im Quirkmodus klappte das gut, aber nicht im Standardmodus. –

Warum führt meine js mit falschem HTML anders aus?

Antwort

Verwandte Themen