вставка встроенного изображения через JavaScript - PullRequest
Новая
       25

вставка встроенного изображения через JavaScript

0 голосов
/ 11 февраля 2012

Я написал один скрипт, который получает URL-адрес изображения через JSONP, а затем мне нужно было записать его в браузер, это изображение состояния, которое является onling.png, offline.png и т. Д.

Мой сценарий выглядит следующим образом. 

<div id='STATUSDIV'></div>
    <script language=javacsript type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></script>
    <script type="text/javascript">$(document).ready(function()
    { 
        $.getJSON('http://MYSSERVERNAME.COM/get.php?callback=?','q=value&index'+Math.random(),
        function(res)
        { 
            document.getElementById('STATUSDIV').innerHTML = ("<img src='"+res.img+"' />");
        });
    });
    </script>

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

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

Но я хотел иметь один и тот же код, куда бы он ни копировался, просто записывает изображение в строку. вроде создать элемент и написать в этом элементе. но это не работает. document.write также не работает, поскольку он заменяет все.

Есть ли способ, когда этот блок кода вызывается, вместо того, чтобы писать innerhtml, код создает динамический div прямо на странице и записывает изображение в этом. и это изображение, пишущее и создающее div, происходит там, где вызывается блок скрипта. так что если в верхнем и нижнем колонтитуле вызывается один и тот же сценарий, изображение статуса будет отображаться как в верхнем, так и в нижнем колонтитулах.

1 Ответ

1 голос
/ 11 февраля 2012

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

function insertStatusHere() {
    var thisId = "status" + insertStatusHere.myDivCntr++;
    document.write('<div class="statusContainer" id="' + thisId + '"></div>');
    $(document).ready(function() {
        $.getJSON('http://MYSSERVERNAME.COM/get.php?callback=?','q=value&index'+Math.random(), function(res) { 
            document.getElementById(thisId).innerHTML = ("<img src='"+res.img+"' />");
        });
    });
}
insertStatusHere.myDivCntr = 0;

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

<script type="text/javascript">
insertStatusHere();
</script>

Это динамически вставляет div с уникальным идентификатором div в место, где выполняется вызов функции, и отслеживает каждый идентификатор, который используется взакрытие.

...