Opening/Changing a Iframe using a click event in wordpress

Question

On my WordPress website, I have a menu down one side and a embedded prezzie within an IFrame next to the menu.

I want to use some form of click event to change the content of the IFrame to another prezie without the page being refreshed, to give it a seamless change but I am stuck on how to write the code.

The menu buttons are actually pictures trapped in a map, to give the illusion they are actually functional buttons.

Can anyone help me with this please?

Thanks in advance.

You want to click somewhere and replace your iframe with other content without refresh? — Tauras
– Tauras, Commented Mar 4, 2015 at 0:34

James Lawruk · Accepted Answer · 2015-03-04 02:01:25Z

1

Add a JavaScript function to swap the Url of the Prezi iframe.

function changePrezi (preziKey) {
  var url = "http://prezi.com/embed/" + preziKey + "/";      
  document.getElementById('prezi').src = url;
}

Then add onClick handlers to your menu links/buttons to call the changePrezi function, passing in the proper Prezi key.

<button onClick="changePrezi('ltv92t40up8k')">Prezi 1</button>
<button onClick="changePrezi('rqqnh_taqx1l')">Prezi 2</button>
<iframe id="prezi" frameborder="0" width="550" height="400"></iframe>

Here is a Plunker Demo.

answered Mar 4, 2015 at 2:01

James Lawruk

31.5k19 gold badges135 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Opening/Changing a Iframe using a click event in wordpress

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related