-1

我想要使​​用 jquery/ajax 的功能，其中图像或 java 动画或外部页面根据单击的按钮加载到 div 中。

1) 单击按钮时，一个新的图像/java 动画/页面将替换 div 中的前一个图像/动画/页面。

2) 某些函数计算并存储内容下载所需的时间

这可能吗？

所有内容都位于不同的域中，Java 动画将需要一些脚本。我需要担心“同源政策”吗？

抱歉含糊不清，让我添加更多细节：

a) 我想避免使用 iframe

b) Jquery 的 .load 函数总是从文件中提取 html 内容。我想从以下网址下载图像：http ://example.com/test/abc.jpg 。

c）为了让动画工作，我需要加载它的脚本。.append 是唯一的方法吗？

4

2 回答 2

0

尝试 jQuery '加载'：

示例代码：

<style>
    #content{
        border:1px solid #000;
        padding:10px;
        height:160px;
        width:230px;
    }
</style>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type='text/javascript'>        
    $(function(){
        $('button').click(function(){
            var btnId = $(this).attr('id');
            $("#content").load(btnId + ".html", function(response, status, xhr) {
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    alert(msg + xhr.status + " " + xhr.statusText);
                }
            });
        });
    })
</script>

<button id="index">Index</button>
<button id="welcome">Welcome</button>
<button id="contact">Contact</button>

<div id="content"></div>

这是 HTML 文件：

  1. index.html 的内容'<hi>index page</hi>'
  2. 带有内容的welcome.html'<hi>welcome page</hi>'
  3. 带有内容的contact.html'<hi>contact page</hi>'

现在这里是

使用 PHP 的外部 url 加载示例：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type='text/javascript'>

    $(function(){
        $('button').click(function(){
            // get url from text box
            var url = $('#url').val();
            $("#content").load('process.php?url='+ url, function(response, status, xhr) {
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    alert(msg + xhr.status + " " + xhr.statusText);
                }
            });
        });
    })
</script>
<input type="text" name="url" id="url" value='' /><button id="load">Load URL Page</button>

<div id="content"></div>

PHP代码：

<?php
$homepage = file_get_contents($_GET['url']);
echo $homepage;
?>
于 2013-07-09T10:16:30.043 回答
0

您确实必须担心同源策略，除非您的内容只能是 JSON，如果我理解正确，则不是。

您最好的猜测是使用 iframe 并在按钮单击时更新其目标。使用 jQuery，您可以这样做：

<iframe src="" id="my-iframe"></iframe>

然后

$('#my-button').click(function(){
    var new_content_url = 'http://some.domain.tld/content.jpg';
    $('#my-iframe').attr('src', new_content_url);
});

至于您问题的第二部分，ready一旦加载，该事件将在您的 iframe 上触发。你可以做类似这样的事情：

var start = new Date();
$('#my-iframe').ready(function(){
     var stop = new Date();
     var elapsed = (stop.getTime() - start.getTime()) / 1000;
     console.log('loading took ' + elapsed + 'seconds.');
});
于 2013-07-09T09:34:21.010 回答