It would be great if a button or a link could change the contents of an embedded iframe. So, that the contents could be changed with a menu of buttons on the Wix side.
So, for instance a button [See Google Search] would set the URL of the embedded iframe something like https://www.google.com and another button [See Yahoo Search] would change the same iframe contents to be https://www.yahoo.com.
Makes sense?
– John
Well, I ran into this need today. Reason, URL parameters for an embedded form that has 25 different versions. For pre-population. Right now, I have to use 25 different html widgets and identical lightboxes to make this work semi-nicely which as you can imagine is just insane. We need this type of interactivity and I checked the API guide, found nothing there that said anything about dynamically interacting with a single iframe html component’s content.
You can change it, I did it on wixshow.com under the Code Library.
this ?
Check out the documentation for the HTMLComponent element -
If you change the src property the web page you want to show will be loaded.
So just do on.click and
set src(value: string): void
I will be able to use a single page and a single iframe and change the source of embedded URL (not full html widget mind you, this is the embed url mode) just like that? Ok will try it in a bit and see what happens. I doubted it was this simple lol
Great, I will give this a go, may save me many many many many extra duplicate pages. THANK YOU!
So I have a problem. This html component I am using is on a lightbox or another page (must be for performance purposes of my other landing page). When I try to assign an onclick to my button to change the source of the widget as it is named, I get this error:
“orderform” is not a valid selector.
How can I achieve what I need to achieve when the trigger button for change of URL is not on the same page as the html widget itself?
Basically, I need this:
Click button > go to this lightbox or page > then display this url in that iframe.
x 25 variations.
Is this even possible?
Ok so I got it as far as this, but for some reason the widget does not change at all.
export function button47_click(event, $w) {wixWindow.openLightbox("BUSINESS CARDS",{DATA:'$w("testhtm").src = "mysourcethirdpartyurl#withparameters";'
});
}
What am I doing wrong?
hmmm, even added the proper requirements on the lightbox to pull the data and it is still not populating at all. 
Alright I NEED some guidance here :3
This is what I have on my originating page
import wixWindow from 'wix-window';
export function button47_click(event, $w) {let testdata='$w("#testhtm").src="http://myexternalurltobechangedoniframe"';
wixWindow.openLightbox("BUSINESS CARDS", 'testdata');}
This is what I have on my lightbox with my html widget (the URL-based one)
import wixWindow from 'wix-window';
$w.onReady(function () {
let receivedData = wixWindow.lightbox.getContext('testdata');
});
What am I doing wrong? I tried it like this on the final lightbox to no avail as well:
import wixWindow from 'wix-window'; $w.onReady(function () { let receivedData = wixWindow.lightbox.getContext(); });
Hi Omid:
Probably best to see more context. But it seems you may need have confusion about the use of lightbox data.
The openLightbox data argument is an object. To get that object in the lightbox you simply call getContext() without any arguments. The data object is what you should get back.
In addition it seems like you are trying to pass a javascript assignment as a variable to the lightbox. Instead why not simply pass the url?
So instead of this
let testdata='$w("#testhtm").src="http://myexternalurltobechangedoniframe"';
you should do this
let testdata={'targetURL':"http://myexternalurltobechangedoniframe"};
You need to have an htmlElement on the lightbox page called $w(“#testhtm”).
Then in your originating page you do this:
import wixWindow from 'wix-window';
export function button47_click(event, $w) {
let testdata={'targetURL':"http://myexternalurltobechangedoniframe"};
wixWindow.openLightbox("BUSINESS CARDS", testdata);
}
Then in your lightbox you do:
import wixWindow from 'wix-window';
$w.onReady(function () {
let receivedData = wixWindow.lightbox.getContext();
let targetURL = receivedData['targetURL'];
if (targetURL) {
$w("#testhtm").src=targetURL;
}
});
Hope this works.
Steve,
My kind sir, you are a miracle worker. A billion thanks! I see what I was getting wrong and missing now.
I really have to find a better way to learn all this as the official “reference” alone does not seem sufficient enough for my noob coding background and there isn’t always an example I can find on these forums necessarily. But you just created a golden example for anyone else who may need this! It worked like a charm. Again thank you so very much for caring and spending time to help a stranger out 
God bless
Omid
Holy crap this just saved me so much extra work and trouble and complication, long live Steve, Wix Code and these forums! THIS **** ROCKS!
Happy to help!
haha unrelated major stupid roadblock.
buttons inside repeaters get the same ID wtf!!! I am in pain just looking at this now, I do not understand why this is the case.
Repeaters are fairly straight forward once you understand the scope concept.
There are two things to be careful of and understand.
In event handlers there are two arguments (event, $w). The $w is important and is distinct from the global $w that you use in site or page code. it should be thought of as $wScoped.
Secondly the enumerator forEachItem also uses a scoping variable ($wScoped, itemData, index).
I usually use a different name for the $w that comes in as an argument from an element method used on a repeater to remind me 
Hope that helps
I am going to have to do more reading and learning I guess, but your screenshot did not make it through
EDIT: its showing now and I am doing even more reading.
