Wie kann ich ein PDF-Dokument in einer KnockoutJS-Vorlage einbetten, ohne dass PDF-Plugins Warnungen ausgeben?

Question

Ich versuche, ein PDF-Dokument in einer HTML-Ansicht einzubetten, wobei ein Knockout-ViewModel die URL für das Dokument bereitstellt. Ich glaube, dass das korrekte HTML-Element dafür `ist, daher habe ich folgende Ansicht:

und folgendes als ViewModel:

function AppViewModel() {
    this.EmbedPDFLink = "http://acroeng.adobe.com/Test_Files/browser_tests/embedded/simple5.pdf";
}

ko.applyBindings(new AppViewModel());

jsFiddle

Dies zeigt das PDF in Chrome, Chrome Canary (beide verwenden das native Chrome PDF-Plugin) und Firefox 27 (Adobe Reader XI-Plugin) an, allerdings zeigen alle drei Browser eine Warnung in einer Leiste oben auf dem Bildschirm an. Chroms ist gelb und besagt, dass es Could not load Chrome PDF Viewer, während die von Firefox grau ist mit einem Informationsicon und besagt, dass dieses PDF-Dokument möglicherweise nicht korrekt angezeigt wird. Der gleiche Code lädt das Plugin leer in IE9.

Wenn ich das data-bind-Attribut durch ein direktes data-Attribut ersetze, das die hart codierte URL für das PDF-Dokument enthält, wird es in Chrome und Firefox korrekt angezeigt, während IE9 überhaupt nichts anzeigt, nicht einmal das leere Plugin.

Ich habe auch versucht, das data-Attribut mithilfe eines -Elements innerhalb des  zu setzen, und das hat in keinem dieser Browser funktioniert.

Ich habe auch versucht, ein -Tag zu verwenden, das ähnliche Ergebnisse liefert, aber in IE9 funktioniert, allerdings scheint dies nicht semantisch korrekt zu sein. Allerdings besagt die Embed-Element-Dokumentation, dass alle Attribute an das Plugin übergeben werden - da die Elemente so ähnlich sind, ist es wahrscheinlich, dass das data-bind-Attribut an die PDF-Plugins übergeben wird und dieses Problem verursacht?

Es scheint, dass der einzige Unterschied im Markup zwischen den hart codierten und data-bind-Versionen das Vorhandensein eines data-bind-Attributs im letzteren ist, also denke ich, dass dies das Problem mit den Plugins verursacht, da das data URL-Attribut korrekt gesetzt wird.

Gibt es eine Möglichkeit, das data-Attribut am Objekt mithilfe von Knockout zu setzen, ohne auch ein data-bind-Attribut zu hinterlassen? Gibt es einen anderen Weg, den jemand kennt, um dieses Problem zu vermeiden?

`

Answer 1

Ich bin mir nicht zu 100% sicher, aber ich glaube, dass das passiert.

Dein HTML-Markup hat ein `- das ist also unmittelbar nach dem DOM-Load vorhanden. Allerdings verwendet das `data`-Attribut eine KO-Bindung. Also unmittelbar nach dem DOM-Load, wenn dasHTML-Element geladen wird, wurden die KO-Bindungen noch nicht angewendet und du erhältst den Fehler.

Ich habe es getestet und das `HTML-Markup in Javascript erstellt und dann zum DOM hinzugefügt, und der Fehler ist verschwunden. Hoffe, es hilft, siehe fiddle

function AppViewModel() {
    this.EmbedPDFLink = "http://acroeng.adobe.com/Test_Files/browser_tests/embedded/simple5.pdf";

    this.addPdf = function () {
        var html = "";
        $('.documentviewerpdf').append(html);
    };
}

ko.applyBindings(new AppViewModel());

und das HTML

PDF laden

Bearbeiten

Hier ist ein aktualisiertes Fiddle, das das PDF automatisch lädt, wenn du die Seite aufrufst (mehr in Übereinstimmung mit dem, was du als Endergebnis haben möchtest, denke ich). Ich habe es in IE, Firefox und Chrome (neueste Versionen) getestet und keine Fehler erhalten.

Fiddle

`

`` ```

Answer 2

Verwenden Sie Bindungen, um alle Ihre Attribute zu verbergen, bis der Quellpfad ausgewertet wurde. Das Plugin sieht Ihre anderen Attribute und denkt, dass Sie ein schlechtes Element haben.

 data-bind="attr: { 'jedes-attribut-hier': true }"

http://jsfiddle.net/C8txY/8/

Chrome erkennt Ihr PDF zu schnell, bevor der Wert ausgewertet wird. Verknüpfen Sie alle Eigenschaften, nach denen das Plugin sucht, mit Ihrer Bindung.

Sie könnten auch eine benutzerdefinierte Bindung verwenden, um die Attribute hinzuzufügen und den Wert des Speicherorts des PDF zu übergeben. Dieser benutzerdefinierte Bindungshandler sollte kein HTML direkt in das DOM einfügen.