Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Запуск веб-страницы с локального диска (https://javascript.ru/forum/css-html/31076-zapusk-veb-stranicy-s-lokalnogo-diska.html)

Stef 26.08.2012 12:49

Запуск веб-страницы с локального диска
 
Только начал осваивать javascript:) Подскажите, как правильно оформить, максимально короткий код запуска веб-страницы с локального диска ПК.
1. Необходимо найти нужную страницу на диске.
2. Запустить ее в полноэкранном режиме или новом окне.
3. Желательно, чтобы код выполнялся в IE, FF, Crome.

Deff 26.08.2012 12:59

Цитата:

Сообщение от Stef
1. Необходимо найти нужную страницу на диске.

Для работы с локальной страницей под JS - вы должны запустить любую локальную страницу со своего компутера, других Вариантов доступа к локальным страницам под чистым JS - нет

Stef 26.08.2012 15:19

Именно это мне и нужно - выбирать и запускать веб-страницы с локального диска своего ПК! Просто хотелось бы, создать примитив вьюера для просмотра внутренних html ресурсов на своем компе. Нужны всего три кнопки:
1. "найти" - с окном показывающем путь к файлу;
2. "запусить" - запускает страницу в разных браузерах, установленных
на ПК.
3. Просмотреть html код первичной страницы.

Deff 26.08.2012 15:23

Stef,
собственно начальная страница может быть такой

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html dir="ltr">
<head>
 <title>Диски</title>
 <link rel="stylesheet" href="file://localhost/C:/Program%20Files/Opera/styles/drives.css" media="screen,projection,tv,handheld,print,speech">
 <meta name="viewport" content="width=device-width">
</head>
<body>
<h1>Диски</h1>
<ol>
 <li><a href="file://localhost/C:/">C:</a></li>
 <li><a href="file://localhost/D:/">D:</a></li>
 <li><a href="file://localhost/E:/">E:</a></li>
 <li><a href="file://localhost/F:/">F:</a></li>
 <li><a href="file://localhost/G:/">G:</a></li>
 <li><a href="file://localhost/H:/">H:</a></li>
</ol>
</body></html>

bes 26.08.2012 16:45

Можно и относительные пути использовать или глобально всё разбросано
не, а чем стандартный поиск не устраивает *.htm(html), через контекстное меню открывай чем хочешь

Stef 26.08.2012 17:45

Огромное спасибо за науку! Но мне нужно, еще более простое решение!
Используя <input type> - получить полный путь к html файлу на ПК, который каждый браузер указывает по своему, а затем вставить полученную ссылку в window.location.href и запустить его (первичный html код). Мне кажется, что такое решение будет универсальным для браузера любой ОС. Простите за наивные вопросы, но нужно кроссплатформенное, простейшее решение!

Stef 26.08.2012 22:33

Прошу прощения за беспокойство, но просмотрев страницы форума удалось найти нужное мне решение:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head
<form enctype="multipart/form-data"  id="path" method="post" name="path" target="_blank">
 <input type='file' onchange='window.location.href(this.value)'> 
</form>
</html>

Однако работает только в IE:-/ Подскажите, решение для любого браузера:help:

Aetae 26.08.2012 22:50

Браузеры кроме осла не предназначены для подобных извращений.

Stef 26.08.2012 23:15

Может быть я и осел, но работаю с таким же ослиным браузером!
Все равно прошу о помощи! На данный момент, мне все равно как написан
код - главное чтобы работал на движке webkit! Думаю, что подправить вышеприведенный код под перечисленные мной требования, Вам не составит никакого труда! Прошу помогите!:help:

bes 26.08.2012 23:21

По последнему сообщению не понятно, понимаете ли вы что осёл - это IE.
подправляю: форма там вообще не нужна, только input
но получить кроссбраузерный результат данным способом скорей всего не получится, так как реальный путь к файлу из value input type=file позволяет получить только IE, остальные - нет по соображениям безопасности.

Stef 26.08.2012 23:54

Но все же, подскажите правильное решение! Приведенный выше код работает, но на webkit выводит(и это понятно!), только путь к файлу не запуская его... Необходимо запустить найденную веб-страницу! Браузер и так сильно "тормозит", ресурсы ОС минимальные! Подскажите лаконичное решение!!!

bes 27.08.2012 08:43

Цитата:

Сообщение от Stef
но на webkit выводит(и это понятно!), только путь к файлу

<input type="file" onchange="alert(this.value)">

вы видели этот путь, это не реальный путь к файлу: максимум оттуда можно вычленить имя диска и название файла

Stef 27.08.2012 20:42

А вот такой код - работает на движке WebKit:
<!DOCTYPE html>
<html>
 <head>
<title></title>
</head> 
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</html>

Подскажите, как можно его минимизировать, чтобы запускались только html файлы?
P.S. Кстати, по предыдущему примеру -"перетаскивание" файла из окна поиска, в окно браузера - запускает его, т.е. выбранная веб-страница открывается!

bes 27.08.2012 21:22

<input type="file" onchange = "location.href = window.webkitURL.createObjectURL(event.target.files[0])">


<input type="file">

<script>
//хром и FF
document.body.children[0].onchange = function (e) {
	window.URL = window.URL || webkitURL;
	var file = e.target.files[0];
	if (file.type.indexOf('html') != - 1) {
		window.location.href = window.URL.createObjectURL(file);
	}
}
</script>


<input type="file">

<script>
//хром, FF, IE
document.body.children[0].onchange = function (e) {
	if (navigator.userAgent.indexOf('MSIE') != -1) {
		var url = this.value; 
		if (url.indexOf('html') != -1 || url.indexOf('htm') != -1) {
			window.location.href = url;
		}
	} else {
		window.URL = window.URL || webkitURL;
		var file = e.target.files[0];
		if (file.type.indexOf('html') != - 1) {
			window.location.href = window.URL.createObjectURL(file);
		}
	}
}
</script>

bes 28.08.2012 00:52

Под оперу только осталось как-то докрутить

Stef 28.08.2012 01:44

Очень изящное и лаконичное решение!!! Прямо на страницу учебника! Огромное спасибо за науку! Однако с QtWebKit, программа работает не совсем корректно:( В окне браузера, после выбора нужного файла *.html в окошке QtOpen, вместо запуска веб-страницы, рядом с кнопкой "Choose File", появляется полный путь к файлу:
file:///usr/local/etc/.../*.html
Приходится создавать дополнительную форму типа:
<!DOCTYPE html>
<html>
 <head>
<title></title>
</head> 
	 <script>
 function urlJump()
    {
      var szNewURL="";
      szNewURL=prompt("open URL ", "name");
      window.location.href=szNewURL;
    }	
	</script> 
<form name="selectForm">
      <p><input type="button" value="GO!" onClick="urlJump();">
</html>

Копировать в поле формы полный адрес, только тогда веб-страница запускается.
В моем случае - это уже огромный прогресс! Подскажите, можно ли, чтобы полученный с помощью Вашей программы полный URL, сразу попадал в поле другой формы?

bes 28.08.2012 09:32

<input type="file" onkeyup="alert(event.keyCode)">

<script>
//хром и FF
document.body.children[0].onchange = function (e) {
	window.URL = window.URL || webkitURL;
	var file = e.target.files[0];
	if (file.type.indexOf('html') != - 1) {
		window.location.href = prompt('url', window.URL.createObjectURL(file));
	}
}
</script>

Stef 28.08.2012 10:29

Спасибо! Мне кажется, хотя может быть это и дилетантский взгляд, что такое решение будет универсальным. input type="file" - вызывает появление кнопки "Найти" ("Choose File"), при ее активации браузер обращается к ресурсам ОС, появляется окно поиска. Когда файл найден, событие отображается, по разному. В IE и FF - появляется поле со строкой пути к файлу, в Crome(WebKit), просто возле кнопки отображается имя файла. Появление новой формы, с полным указанием пути к файлу, должно работать в браузере любой ОС! В Опере не пробовал, но думаю тоже будет работать... Еще раз - огромное спасибо!

Deff 28.08.2012 10:33

Цитата:

Сообщение от Stef
В Опере не пробовал, но думаю тоже будет работать

В Опере запускается только при открытии локального файла HTML и в нем уже могут быть скрипты

bes 28.08.2012 10:36

с оперой не знаю чего делать, она хитрож-я, суёт fakepath везде

Deff 28.08.2012 10:55

bes,
Да, если мон победить, нун ток на оффсайт идти, и то если на тот момент профи будут
Я пытался как то - решил ток через флеш

Stef 28.08.2012 14:42

Может быть кого-нибудь заинтересует? Но последний скрипт на QtWebKit при управлении курсором мыши, html файл не запускает, а при управлении с клавиатуры запускает форму alert, но "подвешивает" ОС. Стоит ли попробовать обычную форму с window.location.href с двумя кнопками: "Запуск" и "Отмена"?

Stef 06.09.2012 23:55

@bes
Последний код, предложенный Вами для открытия веб-страниц с локального диска в Chrome - отлично работает! Однако, в поле формы присутстует непонятный код. Мне же, иногда нужно поменять всего один знак в имени файла и запустить его. Возможно, приведенный ниже код подскажет Вам, что мне необходимо! Почему последняя форма не указывает путь к файлу на локальном диске, а выдает результат: /fakepath/<имя_файла.html>?
<html>
<head>
    <title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
        document.write("<b>Получаем полный путь к файлу:</b> "+ window.location.href);
        document.write("<br /><br>");
        document.write("<b>location.href нашего файла:</b> " + location.href);
        function setLocationHref()
        {
            
            window.location.href = prompt('путь к файлу', ' полный путь');
        }
        
        function setLocation(href)
        {
           
           location.href = document.getElementById(href).value;
        }
                
    </script>

    <p>
        <b>Необходимо получить к файлу локального диска ПК<br />
            с возможностью редактированияи и запустить его</b>      
        <input id="Button1" type="button" value=" html file" onclick="setLocationHref();" />
    </p>
 <p>  
<div class="type_file">
    <input type="file" size="50" class="inputFile" onchange='document.getElementById("fileName").value=this.value' />
    <div class="fonTypeFile"></div>
    <input type="text" class="inputFileVal" readonly="readonly" id="fileName" />
</p>
</div>      
</body>
</html>

Помогите, собрать необходимый скрипт. Увы, пока самостоятельно не могу собрать нужный код :(

bes 07.09.2012 09:17

<input type="file" style="display: none" onchange="setLocationHref(event)">
	<input id="Button1" type="button" value=" html file" onclick="this.previousElementSibling.click()">

<script>
	function setLocationHref(e) {
		window.URL = window.URL || webkitURL;
		var file = e.target.files[0];
		if (file.type.indexOf('html') != - 1) {
			var adr = prompt('url', window.URL.createObjectURL(file));
			if (adr != null) {
				window.location.href = adr;
			}
		}
	}
</script>



Цитата:

Сообщение от Stef
Вам, что мне необходимо! Почему последняя форма не указывает путь к файлу на локальном диске, а выдает результат: /fakepath/<имя_файла.html>

Потому что это меры безопасности, вместо реального пути выдаётся ложный путь (fakepath)

Stef 07.09.2012 20:44

Скрипт замечательно работает, но в поле формы запуска URL, вместо полного пути к файлу на локальном диске -
появляется: blob:null/c5442da7-d395-4671-bd59-745d6fee8192. Как такую штуку редактировать?

bes 07.09.2012 20:54

смысл её редактирования?
PS: полный путь в обычном виде, думаю, никак не получить

Stef 07.09.2012 22:16

Смысл - обучающие примеры, работы с адресной строкой, доступа к файловой системе ПК, примеры запуска приложений. Необходимо сделать это, в полноэкранном режиме браузера, на веб-странице минуя прямое обращение к интерфейсу ОС!


Часовой пояс GMT +3, время: 22:55.