Bracket Struggle at generating iframe and append to subelement... ;-P
Na'Shaya dear Adobe Community!
I have a Joomla website where a Jomsocial community installation contains up from a certain rank respectively usergroup a manually extended profile field designated simply as " iFrame" optionally containing an url the user may enter.
If a user decides so in result the iframe gets created with those entered url as source attribute and appended into the div normally standardized to contain the cover image according to the native functionality of the community component, while the cover image gets removed.
It already works like a charm in case of a community profile on the website is being visited, but on other areas of the website it results in fatal js errors, because it searches for there non-existing elements and shall append it to an element which does not exist either.
So I attempted to make the execution of the according functions to depend on a check, if the current url contains the string "xxx/profile" which should indicate that the visitor is indeed visiting a profile and the functions to replace the cover image with the iframe is needed instead of being able to through errors on other pages...
So if you love the challenge and appreciate to prove your skills as a programmer, you may enjoy that opportunity to provide the solution.
I have the strong suspicion that somethings wrong with the brackets at the end of the code sample or a typically missing semicolon or at the wrong place, because without the outer if clause and last bracket it already works like it shall:
var URL = window.location.href;
if(URL.indexOf("profile") !== -1) {
var COSMiframe = document.createElement('iframe');
COSMiframe.id = "COSMiframe";
COSMiframe.style.width = "100%";
COSMiframe.style.maxWidth = "980px";
var COSMIframe_location = document.getElementsByClassName("joms-js--cover-image");
COSMIframe_location[0].prepend(COSMiframe);
COSMiframe.setAttribute("style", "min-width: 100% !important; min-height: 100% !important; height: 100%; border-radius: 0px 0px 0px 0px !important; overflow: hidden;");
const allh5Tags = document.querySelectorAll('h5');
allh5Tags.forEach(function(item) {
if (item.innerText === "iFrame") {
let nextTag = item.nextElementSibling;
let nextTagContent = nextTag.innerHTML;
let hrefs = nextTagContent.match(/href="([^"]*)/);
let href = hrefs[hrefs.length - 1];
document.querySelectorAll(".joms-js--cover-image img").forEach(img => img.remove());
COSMiframe.src=href;
})
}
});
