Подгрузка файла с кодом и подсветка кода
Вложений: 1
index.html
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('input[name=sw]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one'){
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if(v === 'two'){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else if(v === 'three'){
$('#one').hide();
$('#two').hide();
$('#three').show();
//=============
/*$.ajax({
url: "2.html",
cache: false,
success: function(html){
$("#three").html(html);
}
});
*/
$(document).ready(function(){
$("#three").load("3.html");
});
//=============
}
})
})
</script>
<style>
.none{
display:none;
}
</style>
<input type="radio" name="sw" value="one" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="two" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="three" id="x3"><label for="x3">3</label>
<div id="one" class="none"></div>
<div id="two" class="none"></div>
<div id="three" class="none"></div>
3.html <head> <meta charset="UTF-8"> <link rel="stylesheet" href="syntaxhighlighter/styles/shCore.css" type="text/css"> <link rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css" type="text/css"> </head> <pre class="brush: html"> <div class="wraperr"> <div class="lefmenu">Hello world </div> <div class="content"> </div> </div> </pre> <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript"> SyntaxHighlighter.all() </script> Нужно в Index.html динамически подгрузить файл 3.html и подсветить код, который описывается в 3.html. Отдельно в файле 3.html подсветка работает, но при подгрузке в index.html - нет. Покажите, как сделать. В архиве плагин и оба файла. Проект как есть. |
Строку 35 замените на это:
$("#three").load("3.html",function(){
SyntaxHighlighter.all()
});
|
Не подсвечивает всё равно.
|
daslex,
М.б. грузить 3.html не в div, а в iframe? Например, так ( index.html)
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('input[name=sw]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one'){
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if(v === 'two'){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else if(v === 'three'){
$('#one').hide();
$('#two').hide();
$('#three').show();
$(document).ready(function(){
$("#three").attr("src","3.html");
});
}
})
})
</script>
<style>
.none{
display:none;
}
</style>
</head>
<body>
<input type="radio" name="sw" value="one" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="two" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="three" id="x3"><label for="x3">3</label>
<div id="one" class="none"></div>
<div id="two" class="none"></div>
<iframe id="three" class="none" ></iframe>
</body>
|
Как вариант - работает же.
С другой стороны iframe повод холивару, и не похоже, что хорошее решение. |
daslex,
3.html - самостоятельная страница, со своими плагинам, скриптами, стилями и не будет нормально работать в div. Не хотите грузить в iframe - тогда надо именно в нее добавлять элементы управления, а блоки pre помещать в скрываемые/отображаемые div или использовать <pre class='brush: js; collapse: true'>Здесь контент, который необходимо подсветить и скрыть</pre> Например, вот такой гибридный вариант
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="syntaxhighlighter/styles/shCore.css" type="text/css">
<link rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('input[name=sw]').click(function () {
var v = ($(this).val());
console.log(v);
if (v === 'one') {
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if (v === 'two') {
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else if (v === 'three') {
$('#one').hide();
$('#two').hide();
$('#three').show();
//=============
/*$.ajax({
url: "2.html",
cache: false,
success: function(html){
$("#three").html(html);
}
});
*/
$(document).ready(function () {
$("#three").attr("src", "3.html");
});
//=============
}
})
})
</script>
</head>
<body>
<input type="radio" name="sw" value="one" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="two" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="three" id="x3"><label for="x3">3</label>
<div id="one" style="display:none">
<pre class="brush: html">
<div class="wraperr1">
<div class="lefmenu">Hello world </div>
<div class="content"> </div>
</div>
</pre>
</div>
<div id="two" style="display:none">
<pre class="brush: html">
<div class="wraperr2">
<div class="lefmenu">Hello world </div>
<div class="content"> </div>
</div>
</pre>
</div>
<div id="three" style="display:none">
<pre class="brush: html">
<div class="wraperr3">
<div class="lefmenu">Hello world </div>
<div class="content"> </div>
</div>
</pre>
</div>
<pre class='brush: html; collapse: true'>
<div class="wraperr4">
<div class="lefmenu">Hello world </div>
<div class="content"> </div>
</div>
</pre>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
|
daslex,
Цитата:
|
Я не в теме сленга.
Пока что у меня просто выбора не остается, кроме использования iframe. Там полноценная страница подгружается (в реальном месте), смесь HTML и кодов. Так что, возможно (я ни в коем случае не утверждаю, что это на самом деле так), iframe вообще единственный выход. В любом случае спасибо. Тут на форуме система кармы странная, я не могу добавить ни одному из поучаствовавших здесь форумчан, пока отзыв кому-то не сделаю. (Либо одни и те же люди мне здесь всегда помогают, и я уже добавлял, а система кармы противится). |
daslex,
Цитата:
Одесса, вокзал. Запарившаяся дама с горой чемоданов мечется в поисках такси. Подъезжает наконец какая-то машина: «Куда желаете?» Дама осматривает авто: «Позвольте, вы же не такси!» – «Я не понял, мадам, так вам ехать или шашечки?» Вот так и iframe - оно работает, а кошерно это или халяльно - дело десятое Насчет единственного выхода - посмотрите вариант в пост №6 - я там рабочий пример добавил |
Вторая часть (если вот так в одну страницу всё впихивать) меня вообще не устраивает. Только из-за того, что страница одна слишком большой получилась, а на ней ещё картинок куча, я пытаюсь динамически немного разветвить тему под нужды посетителя, вынося несколько логических продолжений в отдельные файлы. В таком случае, как показано в гибриде, я, похоже, должен то, что вынес в отдельный файл, из файла того внести обратно. Как-то это странно такое делать.
Я просто думаю о тех, у кого проблемы с траффиком, им многомегабайтовые страницы вообще трудно загружать. И я не представляю вообще, как бы я мог выдёргивать тучу кусочков листингов из "3.html", с целью их подсветки в "index.html". Даже если я их повыдёргиваю, мне представляется трудность дальнейшей правки, если придётся править. |
На самом деле я ужасно понимаю происходящее, и могу легко понести ахинею.
|
Можно так попробовать:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('input[name=sw]').click(function(){
var v =$(this).val();
$('#one,#two,#three').hide().filter('#'+v).show();
if(v!='three')
return;
$(document).ready(function(){
$("#three").load("3.html pre",function(){
var css=['styles/shCore.css','shThemeDefault.css'],
js=['shCore.js','shBrushCss.js','shBrushXml.js','shBrushJScript.js'],
load_hundler=function(){
if(++counter==total)
SyntaxHighlighter.all();
},
total=css.length+js.length,
counter=0;
for(var i=0;i < css.length;i++){
var node=document.createElement('link');
node.rel='stylesheet';
node.href='syntaxhighlighter/styles/'+css[i];
node.onload=load_hundler;
document.head.appendChild(node);
};
for(i=0;i < js.length;i++){
var node=document.createElement('script');
node.href='syntaxhighlighter/scripts/'+js[i];
node.onload=load_hundler;
document.head.appendChild(node);
};
});
});
});
});
</script>
</head>
<body>
<input type="radio" name="sw" value="one" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="two" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="three" id="x3"><label for="x3">3</label>
<div id="one" class="none"></div>
<div id="two" class="none"></div>
<div id="three" class="none"></div>
</body>
</html>
В 3-х вещах не уверен: 1. jq.load может не разобрать кашу из html в файле 3.html; 2. jq.load по селектору может вернуть только inner html; 3. в функции load_hundler переменные counter и total могут отсутствовать. |
Nexus,
Так не засветилось. |
daslex, смотрите консоль.
Гадать причину желания нет. |
Да ладно. Сделаю на iframe. Ничего страшного не произойдёт. Только со стилями возиться придётся.
|
daslex, как знаете.
По идее того, что я написал должно быть достаточно, т.е. "победа близка". Нужно только выяснить, что пошло не так. |
daslex,
Я попробовал вариант по пост№6, но не со статичным содержимым, а с подгрузкой текста, который нужно подсветить, в обертке pre, например, такой файл: <pre class="brush: html"> <div class="wraperr2"> <div class="lefmenu">Hello world </div> <div class="content"> </div> </div> </pre> и последующим запуском SyntaxHighlighter.all() - почему-то не срабатывает, обертка pre не преобразуется и подсветки нет. Чем-то добавленный фрагмент ему не нравится. М.Б. стоит попробовать не .html(html), а appendChild. Попробую - отпишусь. |
Обнаружил странную вещь:
Вот такой вариант работает:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="syntaxhighlighter/styles/shCore.css" type="text/css">
<link rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script>
$(document).ready(function () {
// $('input[name=sw]').click(function () {
SyntaxHighlighter.all();
// });
})
</script>
</head>
<body>
<input type="radio" name="sw" value="1" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="2" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="3" id="x3"><label for="x3">3</label>
<div id="one">
<pre class='brush: html'>
alert("Victory");
</pre>
</div>
</body>
Убираю // - по клику не работает. |
| Часовой пояс GMT +3, время: 07:28. |