Question

我希望使用jquery / ajax的功能，其中图像或java动画或外部页面在div中加载，具体取决于单击的按钮。

1）点击按钮后，新的图像/ java动画/页面将替换div中的上一个图像/动画/页面。

2）某些功能会计算并存储下载内容所需的时间

这可能吗？

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

抱歉模糊不清，让我补充一些细节：

a）我想避免使用iframe

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

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

Answer 1

你必须担心相同的原始政策，除非你的内容只能是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.');
});

Answer 2

尝试jQuery'load'：

示例代码：

<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文件：

index.html，内容为'<hi>index page</hi>'
welcome.html，内容为'<hi>welcome page</hi>'
contact.html，内容为'<hi>contact page</hi>'

现在是

使用PHP的外部网址加载示例：

<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;
?>

在div中加载外部内容

2 个答案: