Changing IFrame src attribute

Question

I'm working with a few test pages and I'm having trouble loading the pages in to the IFrame with the src attribute using jQuery. All the pages are local.

Here are the scripts I've tried:

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

---

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

This is the markup for the IFrame:

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

I tried to use this code with online pages and it still didn't work.

If using IFrames is a bad idea, could you please recommend me a different method I can use. The idea of the site is to show a lot of galleries with subjects that the user can browse and every page should hold a gallery.

I'm using the: galleriffic jQuery plugin.

Answer 1

Changing the attribute won't change the location of the iframe.

HTML:

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

JavaScript:

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

But I recommend to use div's for that:

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

You can change the page like this:

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