Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   помогите с innerHTML (https://javascript.ru/forum/events/33646-pomogite-s-innerhtml.html)

sergii 01.12.2012 04:17

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

есть страница с элементом.
<p id="intro">  
<a href="http://www.test.ru/1.jpg">
<img src="http://www.test.ru/1.jpg"></a>
</p>

вывожу элемент с помощью:
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("txt);
</script>


вопрос
как вывести intro с другой удаленной страницы?
допустим с 1.html где есть id intro?

точнее, как jave обратиться к 1.html и найти там id intro?

заранее спасибо за любые ответы.

danik.js 01.12.2012 11:42

Делать асинхронный запрос к серверу (AJAX). Получать всю страницу и оттуда уже выдергивать нужную часть. Не рационально конечно, но если сервер не ваш, то только так (ну можно еще через curl на своем сервере делать запрос страницы, вырезать нужную часть, и в браузер отдавать только ее)
К слову, в jquery есть прозрачный способ получения элемента из страницы через асинхронный запрос - нужно всего лишь в качестве запрашиваемого URL указать site.ru/1.html#intro

sergii 01.12.2012 13:42

Спасибо, сервер наш. Тоесть мне нужно получить элемент со страницы которая лежит на этом же серваке.

danik.js 01.12.2012 15:41

Тогда лучше написать серверный скрипт, который будет возвращать на запрос нужный кусок кода, и обращаться к этому скрипту посредством XMLHttpRequest

Кстати, если документ статичный, нельзя ли просто сохранять рядом нужный фрагмент кода в отдельный файл? Распишите свою задачу шире.

sergii 01.12.2012 22:30

спасибо, может это можно и по другому реализовать, задача у меня такая. Мне нужно чтобы java выводил такой html код на каждую запись из mysql:
<a href="http://www.test.ru/3.jpg">
       <img data-title="#99"
             data-description="различное описание
             <a href=page.html>больше инфо</a>"
             data-layer="<p class='pric'>тескт</p>"
             data-link="http://www.test.ru/page.php?id=99"
        src="http://www.test.ru/3.jpg">                  
</a>


через document.write у меня не выходит, не пропускает спец символы типа #<:>.
весь этот html уже формируется php скриптом, теперь его весь нужно передать через java.
Парсить ничего не нужно, так как весь код html нужен целиком.

danik.js 02.12.2012 01:02

Во-первых, java !== javascript
Во-вторых, зачем этот код выводить через javascript, почему сразу не генерировать страницу уже с этим кодом?

sergii 02.12.2012 03:02

код html я уже сгенерировал php, тот же самый код нужно с генерировать с помощью javascript. Такое уж у меня задание. Мне нужно или взять готовый html с 1.php или полностью по новому генерировать html с помощью javascript. Думал сделать проще с помощью innerHTML - оказалось сложно с удаленной страницы. Вот ищу совета как легче.

danik.js 02.12.2012 03:49

Эффективнее конечно передать массив данных в формате JSON, и уже на клиенте сгенерировать нужную разметку или создавать элементы и атрибуты через API. Пишем скрипт, возвращающий массив, делаем к нему запрос через XMLHttpRequest , получаем ответ, парсим через JSON.parse() , пробегаемся по массиву в цикле, создаем элементы через innerHTML или document.createElement()

sergii 02.12.2012 04:32

ух ты, таких матюгов я не слышал с момента распада СССР, может кто то хочет заработать и сделать это? А то умрет мечта ...

danik.js 02.12.2012 11:02

$data = array(
    array(
        'title' => '#99',
        'description' => 'различное описание <a href=page.html>больше инфо</a>',
        'layer' => '<p class='pric'>тескт</p>',
        'link' => 'http://www.test.ru/page.php?id=99',
        'src' => 'http://www.test.ru/3.jpg',
    ),
    array(
        'title' => '#99',
        'description' => 'различное описание <a href=page.html>больше инфо</a>',
        'layer' => '<p class='pric'>тескт</p>',
        'link' => 'http://www.test.ru/page.php?id=99',
        'src' => 'http://www.test.ru/3.jpg',
    ),
);

$response = json_encode($data);

header('Content-Type: application/json');

echo $response;


var dataRequest = new XMLHttpRequest();

dataRequest.onreadystatechange = function(){
    if (this.readyState == this.DONE) {
        if (this.status == 200) {
            var data = JSON.parse(this.response);
            process(data);
        } else {
            alert('Что-то пошло не так. Код ответа' +this.status);
        }
    }
};

dataRequest.open('GET', 'http://path/to/script.php');

dataRequest.send();

function process (data) {
    if (!(data instanceof Array)) {
        alert('какая-то хрень вместо данных');
        return false;
    }

    for (var i = 0; i < data.length; i++)
    {
        var item = data[i];

        var link, image;
        link = document.createElement('a');
        image = document.createElement('img');
        
        image.setAttribute('data-title', item.title);
        image.setAttribute('data-description', item.description);
        image.setAttribute('data-layer', item.layer);
        image.setAttribute('data-link', item.link);
        image.src = item.src;

        link.href = item.src;
        link.appendChild(image);

        document.body.appendChild(link);
    }
}


Требуется маленький polyfill для IE7-8 (XMLHttpRequest)


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