Opening a new tab or window within an iframe

Ask the community
,
1

Hi there,
I am hoping you can help me with a ongoing issue I am having with my Wix real estate websites. I currently have a few realty sites in my account that have MLS IDX integration. I was able to achieve this by embedding an iframe onto a webpage. The iframe feeds my other website that hosts the IDX reciprocity. The issue I am having with my Wix real estate websites is that when a user scrolls to the bottom of the webpage and clicks on a listing within the iframe, there is a blank white screen because the content is at the top of the page in the iframe. Below is a few screenshots of what I am trying to explain:

**This webpage is ** http://www.lionsgatevillage.com/homes . The listings are nicely displayed on the page.

1905×1080 433 KB

This is another image of the same webpage just a bit further down. I just wanted to show you that the listings are displaying correctly at this point since we haven’t clicked on anything.

1902×1080 273 KB

**When you get to the bottom of the webpage, you will find the last set of property listings. This is where the issue starts. When the user scrolls down the web page they will eventually find a listing they like and want to click on it. The image below is the last listing on ** http://www.lionsgatevillage.com/homes that I will click on for a demonstration. It may not be the same one you see as the IDX updates itself regularly.

1908×1080 181 KB

Once I click on the listing the page looks like it has no content on it besides the footer and header.

1902×1080 120 KB

But the content from the property is actually at the top of the webpage. So if I scroll up to the top where I first started, that is where the content is being displayed.

1900×1080 422 KB

I thought of a solution to fix the issue previously but I cannot seem to make it work. I was thinking that it would be alright if when the user clicked on any listing, it would open in a new window or tab. I believe this would be using target=blank but I am not sure.

I contacted the support team at RealtyNinja, who I get the IDX reciprocity code from and asked if there is a way to do this on their end but unfortunately they cannot do anything without changing everything.

I know that with repeaters we will be able to integrate data feeds from MLS boards once we get approval from them and that you guys are hard at work developing this for us. But in the mean time I have to find a solution because clients are asking for it and telling me they are potentially loosing business. Any feedback, ideas, or thoughts would be greatly appreciated. I know a lot of other Wix experts in the Facebook group are also having the same issue so it would be great to save the day for everyone.

Thanks!

FC

2

Hi FC,
let me try to help.

assuming you control the code of the iFrame, you can do a simple trick.
the outline of it:

  1. add an anchor component to your page, right near the top of the page.
  2. when a listing is selected in the iFrame, shoot a message out of the iFrame to your page code
    (*) I don’t know how easy it will be to detect that a listing was selected, this depends on the specific code you currently have in that iFrame.
  3. when receiving that message, use the anchor’s scrollTo() method to scroll the page up to that point

to do that you have to know how to send and receive messages between an HTML component and your page code.
you can read about it here: HtmlComponent - Velo API Reference - Wix.com

hope this helps.

3

I’ll give it a whirl! Thanks again!!

FC

4

I have tried to learn the articles on sending messages between an HTML component and the page code and have gotten a bit stuck. When clicking on the iframe, I would like the screen to scroll to my anchor that is placed near the top of the page. I have called the iframe “mlsFeed” and the anchor is “anchor1”. Below is the code I have tried but I am surely missing something here. Any help is greatly appreciated!

Thanks!

FC

5

You will need to get the signal from the iframe when something is clicked inside the iframe and handle that in WIX code right?

Take a look at my example when communicating between WIX and an iframe.

Hope it helps.

6


This is the latest attempt at getting the right code. I have an iframe (“#html_1”) and an anchor (“#anchor1”) on a web page. I am very lost on what to do here in order to send a message between the iframe and the page code. Essentially, when the user clicks anywhere within the iframe (“#html_1”), the screen scrolls to the anchor placed at the top of the page ("#anchor1).

I have to meet the deadline for next week on this project. I know this code might need just a bit more, but if someone could help that would be greatly appreciated. I have tried to learn the articles and examples, but it seems like I need a better understanding of the basics first? I really hope I can get this solved because all my real estate sites for clients currently need this and I know a lot of other designers are looking for the same answer.

Thanks in advance,

FC

7

Does the code inside the iframe handles the clicks? When someone clicks inside the iframe a click handler must be present inside that code that will actually POST the clickhandlers data back to the parent as you can see in my code. If that code is missing nothing will happen.

8

I am not sure if the code inside the iframe handles the clicks, but I am assuming so? Here’s a sample of what the iframe is displaying onto the Wix site:

http://lgv.rocketweblabshost.com/houses.html

9

Okey, I have inspected the page and there is no click handler in your iframe code. There is links as a href in every reality property but when clicking inside your iframe there is no posting to parent iframe window.

If you want this to work as expected you will need to add into the iframed code a handler that posts a message to the parent window the wix window to handle the code. If no click handler is inside the iframe no event is triggered.

function handleClick(navigateTo)
{     
    window.parent.postMessage(
    { "type":"click", "label":"button", "value":navigateTo     } , "*"); 
}

In my example all images have onClick=“handleClick(“dataToSend”)”

So when I click an image the above function handleClick is posting a message to the parent window which I then handle in WIX code.

So if you can’t add javascript handler code in your iframed code you won’t receive the event in the WIX code functions no matter how you write them.

The key to make it work is the window.parent.postMessage function that communicates with WIX.