Improve 'googlesyndication-adsbygoogle' — fails to create iframes when there's no '.adsbygoogle'

[Yuki2718]

It seems the current googlesyndication-adsbygoogle fails to create iframe#aswift_1 etc. if .adsbygoogle does not exist when its executed. This is causing these filters in Base

pvpoke-re.com#%#//scriptlet('trusted-create-element', '.adsbygoogle:has(> #aswift_1)', 'div', 'id="aswift_1_host" style="height: 280px; width: 780px;"')
pvpoke-re.com#%#//scriptlet('trusted-create-element', '.adsbygoogle:has(> #aswift_2)', 'div', 'id="aswift_2_host" style="height: 280px; width: 396px;"')

to occasionally fail on the initial load, as they depend on existence of the iframes.

Expected fix:
the redirect should handle the case where .adsbygoogle elements do not yet exist at script execution time, likely by observing DOM mutations (via MutationObserver) and creating the required iframes (#aswift_1, etc.) when .adsbygoogle elements are inserted.

[slvvko]

What is preferred: should the redirect delay iframe creation until .adsbygoogle elements exist (e.g., via MutationObserver), or should it create placeholder iframes proactively without waiting for .adsbygoogle?

[Yuki2718]

I'm not sure what you mean, as those iframes are children or grandchildren of .adsbygoogle, and thus impossible to be created without .adsbygoogle.

[AdamWr]

As I as I understand, the problem is that at the point when scriptlet is executed, there is not .adsbygoogle element yet, so adElems.length is 0 and elements are not created.

Screenshot

I guess we could check if there is not .adsbygoogle element and check document.readyState if it's a loading state, and if so, run this part on DOMContentLoaded event:

Scriptlets/src/redirects/googlesyndication-adsbygoogle.js

Lines 49 to 94 in 3ba245f

	const adElems = document.querySelectorAll('.adsbygoogle');
	const css = 'height:1px!important;max-height:1px!important;max-width:1px!important;width:1px!important;';
	const statusAttrName = 'data-adsbygoogle-status';
	const ASWIFT_IFRAME_MARKER = 'aswift_';
	const GOOGLE_ADS_IFRAME_MARKER = 'google_ads_iframe_';
	let executed = false;
	for (let i = 0; i < adElems.length; i += 1) {
	const adElemChildNodes = adElems[i].childNodes;
	const childNodesQuantity = adElemChildNodes.length;
	// childNodes of .adsbygoogle can be defined if scriptlet was executed before
	// so we should check that childNodes are exactly defined by us
	// TODO: remake after scriptlets context developing in 1.3
	let areIframesDefined = false;
	if (childNodesQuantity > 0) {
	// it should be only 2 child iframes if scriptlet was executed
	areIframesDefined = childNodesQuantity === 2
	// the first of child nodes should be aswift iframe
	&& adElemChildNodes[0].nodeName.toLowerCase() === 'iframe'
	&& adElemChildNodes[0].id.includes(ASWIFT_IFRAME_MARKER)
	// the second of child nodes should be google_ads iframe
	&& adElemChildNodes[1].nodeName.toLowerCase() === 'iframe'
	&& adElemChildNodes[1].id.includes(GOOGLE_ADS_IFRAME_MARKER);
	}
	if (!areIframesDefined) {
	// here we do the job if scriptlet has not been executed earlier
	adElems[i].setAttribute(statusAttrName, 'done');
	const aswiftIframe = document.createElement('iframe');
	aswiftIframe.id = `${ASWIFT_IFRAME_MARKER}${i}`;
	aswiftIframe.style = css;
	adElems[i].appendChild(aswiftIframe);
	const innerAswiftIframe = document.createElement('iframe');
	aswiftIframe.contentWindow.document.body.appendChild(innerAswiftIframe);
	const googleadsIframe = document.createElement('iframe');
	googleadsIframe.id = `${GOOGLE_ADS_IFRAME_MARKER}${i}`;
	googleadsIframe.style = css;
	adElems[i].appendChild(googleadsIframe);
	const innerGoogleadsIframe = document.createElement('iframe');
	googleadsIframe.contentWindow.document.body.appendChild(innerGoogleadsIframe);
	executed = true;
	}
	}

Or like mentioned, MutationObserver can be used.