使用Jquery With和iframe和进度指示器

Question

我知道这存在于某处,但我在几个小时的搜索中找不到它.我只需要将客户端外部页面加载到IFRAME中,但我想使用jquery ui来呈现加载图像,同时抓取外部数据.

简单的是,但我看到的不是整件事.

Answer 1

像这样的东西？

实例: http ://jsfiddle.net/CPadm/

编辑:更新,以便iframe隐藏,直到加载.

直播(更新)示例: http ://jsfiddle.net/CPadm/3/

HTML

<div id="button">Click to load</div>

<iframe></iframe>

<div id='loading'>Page is loading...</div>?

CSS

iframe {
    display: none;
}
#button {
    background: blue;
    color: white;
    padding: 10px;
    width: 100px;
}
#loading {
    width: 300px;
    padding: 20px;
    background: orange;
    color: white;
    text-align: center;
    margin: 0 auto;
    display: none;
}?

jQuery的

$('iframe').load(function() {
    $('#loading').hide();
    $('iframe').show();
});

$('#button').click(function() {
    $('#loading').show();
    $('iframe').attr( "src", "http://www.apple.com/");
});?

相关的jQuery文档:

• .load()- http://api.jquery.com/load-event/
• .hide()- http://api.jquery.com/hide/
• .show()- http://api.jquery.com/show/
• .attr()- http://api.jquery.com/attr/