Iframe Swapping

Question

I have on my Home page a bunch of dropdowns on the pictures and i have a page called Links with an iframe, im using wordpress and visual composer plugin, all links are in a vc text block

My Question: How can i use the same iframe for all the links on home, so when i click a link it goes to links page and changes iframe in wordpress?

Home: http://www.corebusinesssa.co.za/Test/

Links Page: http://www.corebusinesssa.co.za/Test/links

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

To change the content of an iframe, you can you the following.

Your iframe :

<div class="my-iframe">
        <iframe id="my_iframe_id" width="100%" height="1080" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0"
           src="http://my.site.com/onething/otherthing">
        </iframe>
    </div>

and you can update the url with

<script>
        function updateIframeSrc(newSrc) {
            document.getElementById("my_iframe_id").src = newSrc;
        }
</script>

So, you just need to call updateIframeSrc(...) with your new URL when you click on some element you want.

Hope this can help you ;)

EDIT : Add some code to answer comments

A quick and dirty way to send param over url is to add it inside you href. You can do it better if you want ;)

<a href="http://www.corebusinesssa.co.za/Test/links?urlsrc=http://my.site.com/onething/otherthing" target="_blank">click here</a>

Then, you just need to declare the previous function updateIframeSrc(...) and call it when you arrive on the destination page.

To know how to get urlscr param from your url, you can refer to the following post : How to get the value from the GET parameters?

edited May 23 '17 at 12:00

Community

1
1

answered Sep 29 '16 at 14:12

M.Be

312
1
4
14

i tried this js: function setURL(url){ document.getElementById('iframe2').src = url; } html: Varicam visual composer text block seems to remove it :/ – Coolguy6318 Sep 29 '16 at 14:32
If you write this, a click on your href will move you to the new page "/Test/links". Try to put a simple "#" in your href. Or, i think better, just put a span with an "hover" style. In fact, here you do not need to go to another page, you juste want to load new content on an iframe. – M.Be Sep 29 '16 at 14:37
i want the links on home to goto the new links page then update the iframe on that page ye, the links and iframe are on 2 different pages – Coolguy6318 Sep 29 '16 at 14:40
oh ok... so, pass your url "pro-av....." as parameter when you go on "/test/links", and so , on init, get the url from get params and update the iframe with the method in the main answer ;) – M.Be Sep 29 '16 at 14:42
i know this is a dumb question, how do i do that? :c i'v never done any code before and never js :c – Coolguy6318 Sep 29 '16 at 14:44
Thanks for the help :D – Coolguy6318 Oct 05 '16 at 15:16

Iframe Swapping

1 Answers1