jquery - JQuery 在 div 中加载内容

Question

我在使用 JQuery 加载 html 时遇到了困难。以下示例是从另一个帖子中借来的。我无法在 Chrome 中使用它。有人可以帮我整理代码，以便针对所有浏览器进行优化吗？谢谢。

$(document).ready(function () {
    $("#selectchoice").change(function () {

        var selectedOption = $('#selectchoice :selected').val();
        $containerDiv = $('#get_content');
        $containerDiv.html("");
        switch (selectedOption) {
            case "1":
                $containerDiv.html("http://www.google.com/index.html");
                break;
            case "2":
                $containerDiv.load("http://www.yahoo.com/index.html");
                break;
            case "3":
                $containerDiv.load("http://www.bing.com/index.html");
                break;
            default:
                $containerDiv.load("");
                break;
        }
        return true;
    });
});

<select id="selectchoice">
    <option>Select a choice</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Answer 1

您可以尝试以下操作：

// Add iframe in div
<div id = 'get_contentdiv' style="height:400px;width:500px"><iframe width=400px height=400px src="" id="get_content"></iframe></div>

JavaScript 代码：

$(document).ready(function () {
    $("#selectchoice").change(function () {
        var selectedOption = $('#selectchoice :selected').val().trim();
        $containerDiv = $('#get_content');
        $containerDiv.html("");
        switch (selectedOption) {
            case  "1":   
                $containerDiv.attr("src","http://www.google.com");
                break;

            case "2":
                $containerDiv.attr("src","http://www.yahoo.com");
                break;

            case "3":
                $containerDiv.attr("src","http://www.bing.com");
                break;

            default:
                $containerDiv.html("");
                break;
        }
        return true;
    });
});

这是演示：http: //jsfiddle.net/PLuyu/3/

Answer 2

您不能使用 XHR 加载远程页面。尝试像这样使用 iframe 对象：

// html
<iframe src="" id="remotesite"></iframe>

// and the script
document.getElementById('remotesite').load = function() {
 // i'm loaded ;)
};
document.getElementById('remotesite').src = 'http://www.google.fr';

小提琴;) http://jsfiddle.net/692D2/