0

我写了一个脚本，它通过 JSONP 获取图像 url，然后我需要将它写入浏览器，这是一个状态图像，它是 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 上。

但我希望在复制的任何地方都有相同的代码，只是内联写入图像。一种 createelement 并写入该元素。但这不起作用。document.write 也不起作用，因为它会替换所有内容。

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

4

1 回答 1

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。

于 2012-02-11T16:17:55.390 回答