Question

我在使用JQuery加载html时遇到了困难。以下example是从另一个帖子中借来的。我无法在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

您不能将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/

Answer 2

您可以尝试以下操作：

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

JQuery在div中加载内容

2 个答案: