Jquery 在div中加载外部内容

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

1） 单击该按钮后，一个新的image/java animation/页面将替换div中以前的image/animation/页面

2） 有些函数计算并存储下载内容所用的时间

这可能吗

所有内容都位于不同的域中，java动画需要一些脚本。我需要担心“同一原产地政策”吗

抱歉说得含糊不清，让我补充一些细节：

a） 我想避免使用iframe

b） Jquery的.load函数总是从文件中提取html内容。我想从一个url下载图片，比如：取而代之

---

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

您确实需要担心同源策略，除非您的内容只能是JSON，如果我理解正确，这是不可能的

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

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

至于问题的第二部分，加载后，

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.');
});

尝试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>

<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
$homepage = file_get_contents($_GET['url']);
echo $homepage;
?>

#内容{
边框：1px实心#000；
填充：10px；
高度：160px；
宽度：230px；
}
$（函数（）{
$（“按钮”）。单击（函数（）{
var btnId=$（this.attr（'id'）；
$（“#content”）.load（btnId+”.html），函数（响应、状态、xhr）{
如果（状态=“错误”）{
var msg=“抱歉，出现错误：”；
警报（消息+xhr.status+“”+xhr.statusText）；
}
});
});
})
指数
欢迎
接触

这里是HTML文件：

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

<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
$homepage = file_get_contents($_GET['url']);
echo $homepage;
?>

包含内容的index.html

“索引页”

welcome.html，内容为“欢迎页面”

contact.html，内容为“联系人页面”

现在是

PHP外部url加载示例：

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

<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
$homepage = file_get_contents($_GET['url']);
echo $homepage;
?>

$（函数（）{
$（“按钮”）。单击（函数（）{
//从文本框中获取url
var url=$（'#url'）.val（）；
$（“#content”）.load（'process.php？url='+url，函数（响应，状态，xhr）{
如果（状态=“错误”）{
var msg=“抱歉，出现错误：”；
警报（消息+xhr.status+“”+xhr.statusText）；
}
});
});
})
加载URL页面

PHP代码：

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

<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
$homepage = file_get_contents($_GET['url']);
echo $homepage;
?>

是的，使用简单的Get请求（当在同一个域上时）或JSONP请求（在跨域请求的情况下）是可能的，您必须在

中加载内容，还是iframe是一个合理的选择？@thibauts我已经更新了问题。OP明确表示他希望将数据加载到

中，不是

元素。

经常被用作“任何DOM元素”的占位符，因此我的answer.OP澄清了他的意图是不使用

元素。@Jimbo我能读英语，但是谢谢。对于OP的问题，你的代码示例在哪里有帮助，而不仅仅是从文档中复制/粘贴？@Jimbo:我认为现在更好：）@NeerajSingh谢谢你的解决方案。我得到了一个404作为xhr.status为任何网址。这可能是我的托管服务提供商吗？它唯一的作用就是我自己的网站。对于其他的一切，我得到了404error@TanveerDewan：请分享你的密码