Question

我编写了一个脚本，通过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 id，以便该图像将加载到不同的div上。

但是我希望在复制的地方使用相同的代码只是将图像内联写入。一种创造元素并写入该元素。但那不起作用。 document.write也不起作用，因为它取代了所有内容。

有没有办法当这个代码块被调用时，代码在页面上创建一个动态div而不是编写innerhtml，并在其中写入图像。这个图像写入和创建div发生在调用脚本块的地方。这样如果在页眉和页脚中调用相同的脚本，状态图像将显示在页眉和页脚上。

Answer 1

我所知道的最简洁的方法是为您的代码创建一个函数，该函数应尽早包含在页面中，以便随处可用：

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 ID的div，并跟踪闭包中使用的每个ID。

通过javascript插入内嵌图像

1 个答案: