Encapsuler une page internet dans mon application

Question

Bonjour à tous :)

Je suis novice dans la programmation d'app Windows 8, mais je connais bien le HTML/Javascript. Je voudrais, pour commencer, réaliser une app qui encapsule plusieurs pages internet (un peu à la manière de frame en HTML).

Après avoir créé une "Application Vide (Windows)" dans les modèles Javascript sous Visual Studio 2013, j'ouvre ensuite le projet sous Blend, et j'ai ajouté un objet de type HtmlControl, ce qui a automatiquement ajouté le code :

<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri:'http://www.lapagequejeveuxafficher.fr'}"></div>

Et quand je lance l'application, elle s'arrête sur la ligne debugger(); qui se trouve dans base.js

Si je commente cette ligne, l'application se lance et fonctionne correctement (elle affiche le titre).

Qu'est ce qui ne va pas dans ce code ?
Comment faire pour encapsuler des pages internet ?

Merci d'avance de votre aide :)

Answer 1

Bonjour,

pour encapsuler une page il y a 2 possibilités :
- utiliser une iframe, mais tu es alors contraint de mettre les URLs que tu souhaites pouvoir utiliser dans le manifest et qu'elles soient obligatoirement en HTTPS
- utiliser x-ms-webview, elle a exactement le même fonctionnement qu'une balise iframe sans ses restrictions de sécurités.

En somme, tu pourrais avoir :

<x-ms-webview src="http://www.lapage.fr"></x-ms-webview>

En espérant avoir pu aider !

---

Thomas.H

Answer 2

Super, ça marche !
Merci :)

Encore une question : est-il possible de modifier le zoom d'affichage de la page internet ?
J'ai trouvé la balise CSS -ms-content-zooming mais ça ne semble pas fonctionner.

Merci d'avance :)

Answer 3

Oui il est possible de modifier le zoom, tout dépend de ce que tu souhaites faire.
Si c'est de la gestion d'event (type zoom sur une google map), il faudra passer par du javascript.

Sinon, si c'est simplement zoomer dans la page, la propriété CSS suivante devrait t'aider à le faire

transform: scale(1.25);

Bonne journée !

---

Thomas.H

Answer 4

Bonjour,

Transform ne donne pas tout à fait le résultat que je désire. En fait, j'ai mis mon x-ms-webview dans un div qui fait une largeur de 50% et une hauteur de 100%.

Si j'ajoute l'attribut transform:scale(0.8) dans le CSS, alors c'est le cadre entier de la page internet qui est réduit, ce qui laisse apparaitre des bandes blanches tout autour de ma page internet, à l'intérieur du div.

Or moi ce que je voudrais, c'est que ma page internet occupe toujours la totalité du div, mais que le contenu soit diminué (comme quand on modifie le zoom de la page dans Internet Explorer).

Merci :)

Question subsidiaire : j'ai beaucoup de mal à trouver de la doc. Existe-t-il un bon site internet ? Il y a bien sur la librairie MSDN en ligne, mais si on ne connait pas le nom de la propriété/méthode recherchée, comment faire ...