Javascript Girl
  1. Javascript Girl
  3. Ouverture programmée "View Source" Fenêtre HTML dans le navigateur avec Javascript?
Intereting Posts
JavaScript: comment supprimer une ligne contenant une chaîne spécifique Callback ou Promesse? Utilisation de bibliothèques externes JS dans mon projet angulaire 2 Comment convertir PHP regex en JavaScript regex Node.js: redémarrages gracieux et temps de fonctionnement du serveur, comment? Comment puis-je obtenir le compteur d'un bouton google plus +1? Comment arrêter le comportement de clic de lien par défaut avec jQuery Comment réduire l'utilisation de la mémoire de getImageData lors de l'utilisation de la toile pour éditer une vidéo? Comment générer dynamiquement ng-model = "my _ {{$ index}}" avec ng-repeat dans AngularJS? Redimensionnement de l'image avant de télécharger Extension chrome: comment lier / accrocher à l'événement "recherche invoqué" du navigateur? Html: colonne de tableau de survol MarkerClusterer sur le zoom de clic Comment afficher le bouton de retour et de renvoi sur le popup ouvert via window.open ou self.open pour Chrome? Google.maps.geometry.spheric error

Ouverture programmée "View Source" Fenêtre HTML dans le navigateur avec Javascript?

Comment ouvrir par programme la fenêtre "Afficher Source" (en utilisant un Javascript) comme lorsque je clique droit sur le navigateur et cliquez sur "Afficher Source"? Est-ce possible?

Vous pouvez utiliser ce script, nous prenons simplement le innerHTML de la balise html, réévaluez cela et collez-le dans une fenêtre contextuelle. 

function showSource(){; var source = "<html>"; source += document.getElementsByTagName('html')[0].innerHTML; source += "</html>"; //now we need to escape the html special chars, javascript has escape //but this does not do what we want source = source.replace(/</g, "&lt;").replace(/>/g, "&gt;"); //now we add <pre> tags to preserve whitespace source = "<pre>"+source+"</pre>"; //now open the window and set the source as the content sourceWindow = window.open('','Source of page','height=800,width=800,scrollbars=1,resizable=1'); sourceWindow.document.write(source); sourceWindow.document.close(); //close the document for writing, not the window //give source window focus if(window.focus) sourceWindow.focus(); }

Cela ne montrera pas complètement la source, car elle ne montrera rien en dehors des balises HTML, ni aucune propriété à l'intérieur de la balise html, mais elle devrait être suffisamment proche et fonctionne avec un navigateur croisé.

L'avantage de cette solution sur la solution view-source: solution est qu'elle fonctionnera également dans Internet-explorer 6> sur Windows XP SP2, c'est à peu près ça. Si aucun de vos auditeurs ne se trouve dans ce groupe, allez avec l'option view-source, sa façon est plus simple.

Vous pouvez utiliser le schéma URI "view-source", pris en charge par Firefox, Chrome et les anciennes versions d'IE.

Aucun JavaScript n'est requis, juste un lien normal à la page que vous souhaitez que l'utilisateur voie dans la vue source: 

 <a target="_blank" href="view-source:http://www.wikipedia.org/">view Wikipedia's home page HTML source</a>

Plus d'informations:

http://fr.wikipedia.org/wiki/View-source

Cela le fera pour les broswers supportant le schéma view-source: 

 javascript:void(window.open('view-source:'+location.href))

Un bookmarklet pour ce faire peut être fait à partir du lien dans ce scURIple: 

 data:text/html;charset=utf-8,<html> <a href="javascript:void(window.open('view-source:'+location.href))">view-source</a> </html>

Un tel bookmarklet peut être utilisé sur n'importe quelle page avec un URI d'un schéma arbitraire et pas seulement http: ou des pages basées sur HTML (et donc dépourvues de propriétés comme .innerHTML ).

Ainsi, l'URI pour (ces scURIples sont accessibles au rendu de mode immédiat): 

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==

Peut être examiné directement avec: 

 view-source:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==

————————————————– ——————-

Remarque : la rédaction du bookmarklet ci-dessus est un oxymoron et redondant depuis généralement, les navigateurs qui prennent en charge la view-source: schéma (protocole) l'implémentent directement dans l'interface utilisateur, mais certaines interfaces sont gravement paralysées, ce qui explique pourquoi ce marque-page est particulièrement nécessaire lors de l'utilisation : 

 window.navigator.userAgent= Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4 (Splashtop-v1.2.17.0)

L'environnement Splashtop "Instant On" (non) par Device VM embarque sérieusement FF.

(Indice: signet 

  <a href="javascript:void(window.open('view-source:file:///'))"> use view-source to traverse and peruse Splashtop system files</a>

Pour parcourir la structure du répertoire Splashtop, généralement ie: view-source:file://media/ )

————————————————– ——————-

Le diable m'a fait le faire – ne peut pas résister à l'exposé:

… ce lien (sic view-source: peut être utilisé sur n'importe quelle page avec un URI d'un schéma arbitraire …

Y compris elle-même, observez l'URI: 

 view-source:view-source:view-source:view-source:view-source:about:blank

.innerHTML une source HTML évidente et a donc une propriété .innerHTML 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title></title></head><body></body></html>

mais 

 view-source:view-source:view-source:view-source:view-source:about:logo

.innerHTML pas une source HTML et n'a donc pas de propriété .innerHTML .

Pour ce qui est de

Un URI d'un schéma arbitraire: 

  view-source:jar:, view-source:chrome:, view-source:place:, ... ?

On peut supposer que cela est primordialement – tant que le navigateur peut rendre une page avec un URI avec un schéma particulier, alors cette page doit avoir une source interprétatable qui peut être affichée, affichable, sans rendu interprété.

(C. view-source:place:... d. view-source:place:... ne produit pas de page viable, mais non plus une place:... URI, même si un URI peut être mis en favoris – au moins avec FF [v.> 3.04?])

alors … 

 <a href='view-source:javascript:with(document){write(42);close();}' >vs:js: answer</a> <a href= 'javascript:with(document){write(42);close();}' >js: question</a>

Une solution, selon votre utilisation, consiste à le faire comme un complément Firefox ou similaire.

Il y a 2 options [et une solution de contournement, que je vais expliquer plus tard …]

#1. "HTML" de DOM 

 //get HTML from DOM (not really HTML from the server but an interrupted one - the plus is that it is immediate to fetch). (function(){ "use strict"; var d = document.createElement("div"); d.style.cssText = "max-width:500px; max-height:200px; background-color:rgba(223,223,223,.7); border:3px solid rgba(0,0,0,.5); padding:5px; margin:10px; overflow-x:hidden; overflow-y:auto; word-break:break-word; font-family:'Courier New',Consolas,Lucida Console,monospace,sans-serif; text-shadow:.3px .3px rgba(0,0,0,.2),-0.3px -0.3px rgba(0,0,0,.2); border-radius:5px; box-shadow:1px 1px 5px rgba(0,0,0,.3),-1px -1px 5px rgba(0,0,0,.3)"; d.appendChild(document.createTextNode(document.querySelector('html').innerHTML)); document.querySelector('body').appendChild(d); }());

Ceci est le résultat "sûr", sans l'enveloppement <html> et le doctype : De DOM

# 2. HTML à partir du serveur (via "Self-Ajax") 

 //get HTML from server, its the real-deal, but requires internet-connection (again...), since its the same-page you are OK to Ajax (domain wise..) (function(){ var xhr = new XMLHttpRequest(); xhr.responseType = "text"; xhr.onreadystatechange = function(e){ var xhr = e.target , d = document.createElement("div") ; if(xhr.DONE !== xhr.readyState) return; d.style.cssText = "max-width:500px; max-height:200px; background-color:rgba(223,223,223,.7); border:3px solid rgba(0,0,0,.5); padding:5px; margin:10px; overflow-x:hidden; overflow-y:auto; word-break:break-word; font-family:'Courier New',Consolas,Lucida Console,monospace,sans-serif; text-shadow:.3px .3px rgba(0,0,0,.2),-0.3px -0.3px rgba(0,0,0,.2); border-radius:5px; box-shadow:1px 1px 5px rgba(0,0,0,.3),-1px -1px 5px rgba(0,0,0,.3)"; d.appendChild(document.createTextNode(xhr.responseText)); document.querySelector('body').appendChild(d); } xhr.open("GET", String(window.location.href), true); xhr.send(); }());

J'ai couru les deux dans la console, dans cette page actuelle (naturellement avant que j'aie écrit cette réponse …)

Et c'est le résultat côte à côte, notez la différence.

Cote à cote

Notes et trucs …:

  • Vous pouvez utiliser le html's outerHTML (mais il n'est pas toujours disponible dans tous les DOM standards)
  • Facilite la charge de votre serveur en compilant / rendant la source de la page dynamiquement dans le client en utilisant la moustache ou le guidon .
  • Vous pouvez stocker le texte de la page, avant toute (la plupart) des modifications apportées au localStorage , localStorage le code ci-dessus et créer un petit script (et merveilleux), placer ce script dans la head la page juste avant de commencer à modifier la page la source..

La chose la plus simple à faire est d'utiliser cette 1 ligne de Javascript: 

 //function showSource() { window.location = "view-source:" + window.location; //}

J'espère qu'il est compatible avec votre navigateur!

Vous pouvez faire ce qui suit, mais ce ne sera pas la source HTML d'origine: Bouclez le DOM et recréer la source en générant les propriétés / valeurs des nœuds que vous trouvez.

Ce n'est pas une tâche facile (une énorme en fait), mais c'est plutôt votre seule option.

Merci

PS. Je pense que c'est ce que fait FF, car il existe toujours une différence subtile dans les sources.