javascript - 更改 IFrame src 属性

Question

我正在处理一些测试页面，但在使用 jQuery 将页面加载到带有 src 属性的 IFrame 时遇到问题。所有页面都是本地的。

以下是我尝试过的脚本:

$(document).ready(function () {
    $("#button1").click(function () {
        $("#iframeBox").attr("src", "Default.aspx");
    });
});

<小时/>

$(document).ready(function () {
    $("#button1").click(function () {
        $("#iframeBox").attr("src") = "Defualt.aspx";
    });
});

这是 IFrame 的标记:

<iframe id="iframeBox" src="Copy of Default.aspx"></iframe>

我尝试在在线页面上使用此代码，但仍然不起作用。

如果使用 IFrame 不是一个好主意，您能否推荐我一种可以使用的不同方法。该网站的想法是展示大量具有用户可以浏览主题的画廊每个页面都应该包含一个画廊。

我正在使用:galleriffic jQuery 插件。

Answer 1

更改属性不会更改 iframe 的位置。

HTML:

<iframe id="iframeBox" name="iframeBox" src="watever"></iframe>

JavaScript:

document.iframeBox.location.href = "Defualt.aspx";

但我建议使用 div:

HTML:

<div id="iframeBox" data-src="watever.aspx"></div>

JavaScript:

 $("div#iframeBox").css("overflow", "auto"); // or do it in css
 $.get($("div#iframeBox").data("src")).success(function(data) {
     $("div#iframeBox").html(data);
 }).error(function() { $("div#iframeBox").html("Could not load page."); });

您可以像这样更改页面:

 $.get("Default.aspx").success(function(data) {
     $("div#iframeBox").html(data);
 }).error(function() { alert("Error while changing page!"); });