How can I change content of an iFrame dynamically in iWeb?

My question is related to another issue I had in this thread: https://discussions.apple.com/thread/3045473

I wanted to have an iFrame in a page to have as its content another page in my iWeb site. The issue I had was solved by using the proper relative URL paths. I think I may have a similar problem here.

What I really wanted was a clean submenu bar for one of my pages. In place of a submenu, I decided to use a few javascript buttons that dynamically change the content of an iFrame. I'm using HTML snippets for this, one for each of the buttons, and another for the iFrame whose content will be changing.

For some reason, however, I can't find a way to dynamically change the content of the iFrame. When I click on the button, the page gets reloaded to a page whose only content is the button. I've tried different ways of getting the iFrame by id and changing its source. I know the function gets called because I tested it with a dummy alert. Here's an example of something I tried...

Here's the code for the iFrame:

<iframe src = "../TestPage.html" id="contentFrame" width="650px" height="600px" frameborder="0" scrolling="no" allowTransparency="true"></iframe>

Here's the code for the button:

<script type="text/javascript">

function changeContent()

{

document.getElementById("contentFrame").src = "http://www.apple.com";

}

</script>

</head>

<a href="#" onclick="changeContent()" >Submenu Item 1</a>

I think iWeb is somehow interfering with how I'm getting the iFrame by its id. How can I get this to work?