Программно открыть окно HTML «Просмотр исходного кода» в браузере с помощью Javascript? - PullRequest
Новая
       15

Программно открыть окно HTML «Просмотр исходного кода» в браузере с помощью Javascript?

10 голосов
/ 29 ноября 2009

Как программно открыть окно «Просмотр источника» (с использованием некоторого Javascript), как когда я щелкаю правой кнопкой мыши в браузере и нажимаю «Просмотр источника»? Возможно ли это?

Ответы [ 7 ]

25 голосов
/ 29 ноября 2009

Вы можете использовать схему URI "view-source", поддерживаемую Firefox, Chrome и более ранними версиями IE.

Не требуется JavaScript, просто обычная ссылка на страницу, которую пользователь хочет видеть в режиме просмотра исходного кода: 

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

Дополнительная информация:

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

13 голосов
/ 29 ноября 2009

Вы можете использовать этот скрипт, мы просто берем innerHTML тэга html, повторно добавляем его и вставляем во всплывающее окно. 

<code>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+"
"; // теперь открываем окно и устанавливаем источник как контент sourceWindow = window.open ('', 'Источник страницы', 'высота = 800, ширина = 800, полосы прокрутки = 1, изменяемый размер = 1'); sourceWindow.document.write (источник); sourceWindow.document.close (); // закрываем документ для записи, а не окно // дать фокус окна источника if (window.focus) sourceWindow.focus (); }

Это не будет полностью отображать источник, так как не будет отображать ничего вне тегов HTML или каких-либо свойств внутри тега html, но оно должно быть достаточно близко и работать в кросс-браузерном режиме.

Преимущество этого решения перед решением view-source: решение заключается в том, что оно также будет работать в Internet Explorer 6> на Windows XP SP2, вот и все. Если ни одна из вашей аудитории не входит в эту группу, воспользуйтесь опцией view-source, она намного проще.

3 голосов
/ 14 апреля 2014

Это будет сделано для брокеров, поддерживающих схему view-source: 

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

Букмарклет для этого можно сделать по ссылке в этом учебнике: 

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

Такой букмарклет может использоваться на любой странице с URI произвольной схемы, а не только на http: или страницах, основанных на HTML (и, следовательно, лишенных таких свойств, как .innerHTML).

Таким образом, URI для (эти scURIples поддаются немедленному режиму рендеринга): 

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==

можно проверить напрямую с помощью: 

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==

----------------------------------------------- ----------------------

Примечание : создание вышеприведенного букмарклета является оксюмороном и избыточным, поскольку в целом браузеры, поддерживающие схему (протокол) view-source:, реализуют ее непосредственно в пользовательском интерфейсе, однако некоторые интерфейсы сильно повреждены, что почему эта закладка особенно необходима при использовании: 

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)

Среда Splashtop «Instant On» (не) Device VM серьезно ампутирует FF.

(подсказка: закладка 

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

для просмотра структуры каталогов Splashtop, обычно это: view-source:file://media/)

----------------------------------------------- ----------------------

дьявол заставил меня это сделать - не может удержаться от изложения:

... эту ссылку (sic view-source:) можно использовать на любой странице с URI произвольной схемы ...

включая себя, соблюдайте URI: 

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

создает очевидный источник HTML, поэтому имеет и .innerHTML свойство 

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

но 

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

не является источником HTML, поэтому не имеет и .innerHTML свойства.

Что касается

URI произвольной схемы: 

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

Предположительно, это элементарно, так как браузер может отображать страницу с URI с определенной схемой, тогда эта страница должна иметь интерпретируемый источник, который может быть отображен, т.е. доступен для просмотра, с o интерпретированный перевод.

(т. Е. view-source:place:... не создает жизнеспособной страницы, но при этом place:... URI также не создается, хотя такой URI можно добавить в закладки - по крайней мере, с помощью FF [v.> 3.04?])

итак ... 

<a href='view-source:javascript:with(document){write(42);close();}' >v-s:js: answer</a>  
<a href=                    'javascript:with(document){write(42);close();}' >js: question</a>
2 голосов
/ 18 марта 2015

Есть 2 варианта [и обходной путь, который я объясню позже ..]

# 1. «HTML» от Д.О.М 

//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);
}());

это «безопасный» результат без <html> и doctype: from DOM

# 2. HTML с сервера (через «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();
}());

Я запустил оба в консоли, на этой текущей странице (естественно, прежде чем я написал этот ответ ..)

и это побочный результат, обратите внимание на разницу.

Side By Side

заметки и прочее ..:

  • вы можете использовать HTML outerHTML (но он не всегда доступен в каждом стандартном DOM)
  • облегчает нагрузку на ваш сервер, динамически компилируя / визуализируя источник страницы на стороне клиента, используя усы или руль .
  • вы можете сохранить текст страницы перед любыми (большинством) изменениями в localStorage, разветвить приведенный выше код и создать небольшой (и замечательный) скрипт, поместить этот скрипт в head страницы непосредственно перед тем, как вы начнете изменять источник страницы ..
2 голосов
/ 29 ноября 2009

Одно из решений, в зависимости от вашего использования, состоит в том, чтобы сделать это как дополнение к Firefox или подобное.

1 голос
/ 11 декабря 2014

Самое простое, что нужно сделать - это использовать 1 строчку Javascript: 

//function showSource() {

window.location = "view-source:" + window.location;

//}

Надеюсь, это совместимо с вашим браузером!

0 голосов
/ 29 ноября 2009

Вы можете сделать следующее, но это не будет исходный HTML-источник: переберите DOM и заново создайте источник, выведя свойства / значения найденных узлов.

Это непростая задача (на самом деле огромная), но она довольно единственная для вас.

Спасибо

PS. Я думаю, что это то, что делает FF, потому что всегда есть тонкая разница в источниках.

...