Pdf.js: Habilite la compatibilidad con IE 11 de Angular + pdf.js

Creado en 24 mar. 2017  ·  10Comentarios  ·  Fuente: mozilla/pdf.js

Configuración:

  • Navegador web y su versión: IE 11
  • Sistema operativo y su versión: Cualquiera
  • Versión de PDF.js: 1.4.0
  • Versión de AngularJs: 1.5.11

Pasos para reproducir el problema:

  1. Utilice AngularJS 1.5.11 con bootstrapping automático
  2. Incluya PDF.js versión 1.4.0 ANTES de las etiquetas de script de Angular

¿Cuál es el comportamiento esperado? (agregar captura de pantalla)

  • Angular funciona perfectamente junto con PDF.js
  • PDF.js envuelve la API que falta en una función que usará la versión modificada si la nativa no está disponible.

¿Qué salió mal? (agregar captura de pantalla)

  • Ver https://github.com/angular/angular.js/issues/15772
    Actualmente, pdf.js define document.currentScript pero no link.origin ni link.protocol. Si comienza angular, comprueba si se le permite arrancar automáticamente, comprueba si hay currentScript y asume que esto será suficiente para filtrar IE, lo que significa que si currentScript no está definido, podemos arrancar automáticamente. Esta verificación no funcionará en combinación con pdf.js.

Las bibliotecas no deberían modificar las propiedades de los objetos que no son de su propiedad, ya que provocan problemas como este. Si necesitan una API en particular que falta en algunos entornos compatibles, pueden envolver su uso en una función que usará la versión modificada si la nativa no está disponible.

Enlace a un visor (si está alojado en un sitio que no sea mozilla.github.io/pdf.js o como extensión de Firefox / Chrome):
http://plnkr.co/edit/YFCQM2Px0QU0KnGzsAlM?p=preview

1-other

Todos 10 comentarios

Suena como echar la culpa de la lógica angular de comprobación de seguridad algo incompleta de IE11 a PDF.js polyfill ... de acuerdo. Marcando como un simple error para arreglar este vacío:

  1. document.location.origin debe establecerse en una nueva URL (document.location.href) .origin si la propiedad 'origin' está ausente
  2. HTMLScriptElement.prototype tendrá los captadores de origen y protocolo con la lógica similar a la anterior.

@yurydelendik Para mí, esto es análogo a la situación en la que un par de API web tuvieron que cambiar sus nombres porque MooTools estaba aplicando polyfills parciales y el código en la Web comenzó a depender de ello.

Polyfilling es arriesgado, en mi opinión, debe hacerse solo con polyfills completos y solo en aplicaciones finales, no en bibliotecas. Si las bibliotecas necesitan una API en particular que no está disponible en todas partes, deben incluir la API nativa en una función de utilidad y usar esa función; que elimina toda la clase de posibles errores como este.

En resumen: el código de la biblioteca no debería modificar los objetos que no le pertenecen, por ejemplo, los globales del navegador nativo.

El polyfilling es arriesgado

@mgol oh, estoy de acuerdo. Toda la aplicación de visualización de PDF.js debe residir en su propia caja de arena (recomiendo iframe), pero la gente sigue usándola en aplicaciones más grandes. Entonces tenemos que reaccionar en consecuencia.

el código de la biblioteca no debe modificar los objetos que no le pertenecen, por ejemplo, los globales del navegador nativo.

Tomemos otro ejemplo, sin matrices escritas y la biblioteca Promise PDF.js no sería lo mismo. Y al no modificar los objetos globales, haríamos nuestro código ilegible y probablemente menos eficaz para la mayoría de los navegadores modernos.

Tomemos otro ejemplo, sin matrices escritas y la biblioteca Promise PDF.js no sería lo mismo. Y al no modificar los objetos globales, haríamos nuestro código ilegible y probablemente menos eficaz para la mayoría de los navegadores modernos.

No necesariamente. Puede mantener su propio conjunto interno de variables que sombrean las globales. Es posible que esto no cubra todos los casos, pero al menos las promesas deberían estar bien. Algo como:

var Promise = window.Promise || PROMISE_POLYFILL;

en la parte superior de PDF.js. En ese caso, no está tocando el global y aún puede usar Promise en su código sin ningún cambio.

Esto tampoco debería afectar el rendimiento en los navegadores modernos, ya que es un alias simple para ellos.

Sin embargo, entiendo que puede que no sea tan fácil en todos los casos (p. Ej., Si solo se necesitan polrelleno algunos métodos)

El código PDF.js se está transformando para usar módulos ES6. El enfoque anterior puede ser un cajero automático problemático, a menos que un empaquetador proporcione automáticamente un polyfill.

No me gustaría convertir este problema en una discusión sobre la lógica angular o el enfoque de compatibilidad de pdf.js, será bueno arreglar nuestro polyfill para que jueguemos bien con angular. Un PR es bienvenido :)

En el pensamiento diferente, cerremos este problema ya que no se solucionará. No hay confirmación de que haya usos en el mundo real de Angular + PDF.js + IE11; si los hay, la solución se puede hacer fácilmente en el lado angular mediante el parche de Angular.js.

Hola, sé que este es un tema antiguo, pero me encuentro con el problema descrito anteriormente.

Tengo un proyecto en el que estoy usando Angular 5 con PDF.js y debo admitir IE11. Soy un novato en Angular, así que no estoy exactamente seguro de cómo "parchearía Angular.js". ¿Me pueden dar alguna orientación sobre cómo puedo solucionar este defecto? Gracias por adelantado.

@elliotstoner, este problema se trata de la compatibilidad con AngularJS, no con Angular (2+) y solo se aplica si usa ng-app lugar del arranque manual. Angular 2+ ni siquiera admite el arranque automático, por lo que este problema no se aplicará allí.

@mgol Ah ok, entonces crearé una nueva edición, gracias.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

zerr0s picture zerr0s  ·  3Comentarios

AlexP3 picture AlexP3  ·  3Comentarios

sujit-baniya picture sujit-baniya  ·  3Comentarios

dmisdm picture dmisdm  ·  3Comentarios

azetutu picture azetutu  ·  4Comentarios