Waiting for rendering of an html component (iframe)

Question:
Hi Wix community!

One issue that regularly drives me to despair as a beginner (despite reading several articles) is the Promise.

In the specific case: I want to wait until the rendering of one or more HtmlComponents is completed (HTML boxes / iframe).

There is even a function:
let isRendered = $w("#myElement").rendered; // true

But how do I get $w.onReady to return a Promise only when the rendering of the/all HTML boxes is complete?

Regards, Spektral!

Product:
Wix Editor

Hi!

Unfortunately, I haven’t made any progress yet.
Does anyone have any ideas?

Best regards and thank you, Spektral

When page is ready, all elements should be ready aswell, not so ?
If i am honest, i never was in the situation to be forced to use …

let isRendered = $w("#myElement").rendered;

But maybe this is what you are searching for…(even if i do not really understand the issue)…

$w.onReady(async()=>{console.log('Page is ready now....');
    let isRendered = await $w("#myElement").rendered; console.log('Element-Rendered: ', isRendered);
});

Hi @russion-dima

Thanks for the tip, I’ll give it a try :hugs:

In the end, I want the component to be rendered before the Googlebot reads it so that the information can be evaluated for SEO. Of course, it’s always a trade-off between performance (which worsens SEO in this case) and Google-readable content (which improves SEO in this case).

As far as I know (but my knowledge has an early end), onready can report a Promise even if the page has not yet been fully rendered. The Googlebot currently only sees an empty iframe, even though everything is displayed in the browser.

Thanks & regards, Spektral

Hi @russion-dima,

I have inserted an HtmlComponent on a page that otherwise contained no code and only inserted the following:

$w.onReady(async()=> {
	let isRendered = await $w("#ViatorWidget").rendered
});

The html code (for an Viator affiliate) in the HtmlComponent is

<div data-vi-partner-id=..... data-vi-widget-ref=.....></div>
<script async src="https://www.viator.com/orion/partner/widget.js"></script>

Everything is fully displayed in the browser. But the content of the HtmlComponent is still displayed empty by the Googlebot, i.e. I guess onReady still returns a Promise before the rendering is finished?

The topic is addressed here, for example:

Greetings, Spektral

Grüße, Spektral

Da müsstest du eventuell noch tiefer bohren und zwar wenn du in den DASHBOARD-SETTINGS reingehst und dort dann den Zutritt zum main-page-coding erlangst → HEAD-BODY usw. Generiere dir dort ein script, welches zunächst das verhalten aller Vorgänge sichtbar macht → CONSOLE-LOGS .

Man kann von dort aus das iFrame manipulieren, ich möchte aber nicht näher darauf eingehen.

Beobachte einfach mal alle Prozesse. Vielleicht landest du ja auch direkt vor den gesicherten Toren von Wix, wo dir dann gesagt wird – DU KOMMST HIER NICHT VORBEI (Herr der Ringe) :grinning:

Hi russian-dima,

Danke für die Rückmeldung!
Ich fürchte aber, das übersteigt meine Möglichkeiten :stuck_out_tongue_winking_eye:

D.h. mit Bordmitteln weiß onReady nicht, wann der Inhalt eines iframe gerendert ist? Weißt Du, wofür es dann .rendered gibt - technisch gesehen, kann Wix es auch nicht wirklich beurteilen, wann der Code eines Drittanbieters „fertig“ ist, oder?

LG, Spektral

Wie gesagt, diesen RENDER-BEFEHL habe ich noch nie so wirklich unter die Lupe genommen und inspiziert. Bis auf die Tatsache, dass ich mal im Zusammenhang mit einem ganz anderen Problem, zufällig mal gesehen habe wie man iFrames (HTML-Components) manipulieren kann und auch abfragen kann (außerhalb der normalen CODE-Umgebung, sprich → page).

Da habe ich so tief gegraben, bis ich tatsächlich vor den Sicherheitstoren von Wix angekommen bin und eine hübsche Meldung bekommen habe :grin: :grin: :grin: :grin:

Hätte mal ein Screenshot machen sollen. Ist nun aber schon länger her und den Weg dorthin werde ich wohl nicht mehr so schnell wiederfinden xDDDD.

Wenn das so ist (nicht getestet oder inspiziert) → dann wäre die letzte Rettung das codiren direkt in den DASHBORAD-SETTINGS → das ist dann aber meist kompliziert.

Als BEISPIEL:

Du wolltest gerne mal etwas einbinden was beispielsweise auf all deinen Wix-Seiten gezeigt werden soll → wir nehmen das zu mal das Beispiel → PRELOADER ←

Du würdest jetzt vermutlich denken → den würde ich auf der Master-Page generieren.
Wäre vielleicht auch teilweise möglich → ich hingegen würde dies direkt in den DASHBOARD-SETTINGS reincodieren.

Hier mal ein PRELOADER denn ich so direkt eingebunden habe (weder auf eines der PAGES, noch auf der MASTER-PAGE)

https://www.media-junkie.com/

Machst du den LINK auf wird ein → PRELOADER angezeigt <----
Dieser ist direkt eingebunden.

Weitere infos dazu wirst du finden indem du die Suche nach PRELOADERN durchscannst.

Desweiteren solltest du mal nach ein paar Artikel über → wie binde ich eine Web-Cam ein, oder wie binde ich ein Mic ein, suchen und diese mal alle lesen.

Da wird dir dann vielleicht schon ein erstes Licht aufgehen.

1 Like

…dann lass’ ich das vielleicht besser aus :innocent:

Aber Danke für die Infos, das ist interessant, ich werde auf jeden Fall mal in das Thema Preloader reinlesen.

Der Anbieter stellt auch eine API zur Verfügung, dann kann ich vermutlich auf iframes und die damit einhergehenden Schwierigkeiten verzichten. Natürlich müsste ich dann aber auch auf die bequemen Widgets verzichten, aber irgendwas ist ja immer :grin:

Für mich ist das ein Hobby, unglaublich, wie viel Zeit man damit verbringen kann, wenn man sich etwas in den Kopf gesetzt hat, das man erreichen möchte…

LG, Spektral

PS.
To everyone else, sorry for the German, but when in doubt, any translation today is just a mouse click away… :rofl:

1 Like