-1

我是 JQuery 和 Javascript 的新手，在网上找不到一个很好的例子来说明如何只刷新 div 中的 html 对象。

html 对象是来自 cosm.com 的这张图 在此处输入图像描述

索引.html

<div id="graph" >
<object type="text/html" style="width:100%; height:100%; margin:1%;"data="https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?width=740&height=150&colour=%230055ff&duration=5minutes&legend=Vibrations%20measure%20%200%20-%3E%201024&title=Foosball%20Vibrations%20-%205%20Minutes&stroke_size=4&show_axis_labels=true&detailed_grid=true&scale=manual&max=75&timezone=Mountain%20Time%20(US%20%26%20Canada)" >
</object>
</div>

脚本.js

$(document).ready( function() {
updateGraph;
setInterval (updateGraph, 2000);
}
function updateGraph() {
     //This line is not working!!!!
    $('#graph').reload();
    //$('#graph').load();

}

http://jsfiddle.net/spuder/PNK4k/

4

3 回答 3

1

试试这个http://jsfiddle.net/Bvpft/16/

在 Chrome 和 FireFox 中测试。它刷新并重新下载图像，但不确定它应该做什么。

HTML

<!DOCTYPE html>
<body>
    <div id="graph" >
        <object type="text/html" style="width:100%; height:100%; margin:1%;" data="">
        </object>
    </div>
</body>

Javascript

$(document).ready( function()  {
    var graph = $('#graph'),
        uri = 'https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?',
        params = {
            width: 740,
            height: 150,
            colour: '#0055ff',
            duration: '5minutes',
            legend: 'Vibration measure 0 -> 1024 ',
            title: 'Foosball Vibrations - 5 Minutes',
            show_axis_labels: 'true', 
            detailed_grid: 'true',
            scale: 'manual',
            max: 75,
            timezone: 'Mountain Time (US & Canada)'
        };
    var updateGraph = function() {
        var data = uri + $.param(params);
        graph.empty();
        graph.append($('<object/>')
                     .prop({'type': 'text/html', data: data})
                     .css({'width': '100%', 'height': '100%'}))
   };
   updateGraph();
   setInterval (updateGraph, 1000);
});

已编辑 - 更改为图像，不闪烁，添加无缓存（在 IE10、Chrome 和 FireFox 中测试）：http: //jsfiddle.net/JAYDb/4/

HTML

<div id="graph" ></div>

CSS

#graph {
    background-color:#C0C0C0;
    margin: 0 auto;
    min-height: 200px ;
    min-width: 750px ;
    display: inline-block;
}
#graphObject{
    display: block;
    width: 100%;
}

Javascript

$(document).ready( function()  {
    var uri = 'https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?',
        params = {
            width: 740,
            height: 150,
            colour: '#0055ff',
            duration: '5minutes',
            legend: 'Vibration measure 0 -> 1024 ',
            title: 'Foosball Vibrations - 5 Minutes',
            show_axis_labels: 'true', 
            detailed_grid: 'true',
            scale: 'manual',
            max: 75,
            timezone: 'Mountain Time (US & Canada)'
        };
    var data = uri + $.param(params),
        graph = $('#graph'),
        obGraph = $('<img/>').prop({'id': 'graphObject'});
    var updateGraph = function() {
        var date = new Date(),
        src = data + '&' + date.getTime();
        obGraph.prop('src', '');
        obGraph.prop('src', src);
   };
   graph.empty().append(obGraph);
   updateGraph();
   setInterval (updateGraph, 1000);
});
于 2013-03-30T00:47:09.273 回答
0

缺少右括号？

$(document).ready
(  function() 
    {
     updateGraph;
     setInterval (updateGraph, 2000);
    } 
); // missing

你的 jsfiddle 不工作，因为没有选择 jQuery 版本。我做了一个工作示例：

$(document).ready( function()  {
    alert("OK");
   updateGraph();
   window.setInterval(updateGraph, 5000);
} );

function updateGraph() {
    //This line is not working!!!!
    alert("ok");
    //$('graph').reload(); // unknown method?
}

http://jsfiddle.net/mmGT9/4/

"$('graph').reload(); 是什么意思？那是自定义函数吗？

如果你想重新加载“对象”，我会从 HTML 区域中删除对象，只留下空白的 DIV。然后在您的 javascript 函数中添加以下行。

$("#graph").html('<object type="text/html" style="width:100%; height:100%; margin:1%; " data="https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?width=740&height=150&colour=%230055ff&duration=5minutes&legend=Vibrations%20measure%20%200%20-%3E%201024&title=Foosball%20Vibrations%20-%205%20Minutes&stroke_size=4&show_axis_labels=true&detailed_grid=true&scale=manual&max=75&timezone=Mountain%20Time%20(US%20%26%20Canada)" ></object>');

这会将对象设置为 id 为“graph”的元素。div 中的现有内容将被覆盖。该函数每 n 秒调用一次并替换对象，这会强制重新加载。您可以通过使用变量来做得更漂亮。

这是一个例子：http: //jsfiddle.net/mmGT9/5/

于 2013-03-30T00:17:43.753 回答
0

jsFiddle

这工作..

我把你改成object了img标签

<img id='obj' style="width:100%; height:100%; margin:1%; " src=...


$('document').ready( function() {
    var i;

        var src = $('#obj').prop('src'); 
    setInterval(function(){
        i++;
        $('#obj').prop('src',src+"&"+i);

    },5000);
});
于 2013-03-30T00:38:16.240 回答