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

Я написал один скрипт, который получает 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.

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

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


javascript innerhtml javascript-injection inline-images jsonp
person NitinKumar.001    schedule 11.02.2012    source источник
comment
пользователь может добавить этот блок скрипта в любое место на странице внутри тега body, но несколько раз. либо в ячейке таблицы, либо внутри другого div, либо прямо в теле.   -  person NitinKumar.001    schedule 11.02.2012

Ответы (1)


arrow_upward
1
arrow_downward

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

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 в место вызова функции и отслеживает каждый идентификатор, который используется в замыкании.

person jfriend00    schedule 11.02.2012
comment
Спасибо, это помогло мне, и я нашел именно то, что искал, я немного изменил код и вместо того, чтобы снова вызывать функцию (как я знаю, конечный пользователь не будет снова копировать вызов функции, а просто скопирует и вставит весь скрипт), Я вызвал функцию сразу после тела функции - person NitinKumar.001; 11.02.2012