Issue

This Content is from Stack Overflow. Question asked by Joseph

I need to newProductPanelContainer insie replaceclass="Replace" through JS. I’m wondering why this doesn’t add anything? I’m adding an iframe to it.

Where to add

<div replaceclass="Replace">
  <div class="hello">Hello</div>
  <div class="hi">Hi</div>
  <div class="yes">Wait</div>
</div>

Iframe div

<script type="text/javascript">
  var innerDiv = document.createElement("newProductPanelContainer");
  innerDiv.innerHTML = `<iframe id="productPanelIFrame" src="https://test.com" width="100%" height="100%" style="border: none"></iframe>`;
  innerDiv.style.width = "100%";



  

  window.addEventListener("message", productPanelMessageListener);

  function changeProductPanelIFrameStyles(styles) {
    const productPanelIFrame = document.getElementById(
      "productPanelIFrame"
    );
    if (productPanelIFrame) {
      document.getElementsByClassName(
        "newProductPanelContainer"
      )[0].style.height = styles.height;
    }
  }

  function openSyndicationModalIFrame(styles) {
    const newSyndicationModalID = document.getElementById(
      "newSyndicationModalID"
    );
    if (newSyndicationModalID) {
      newSyndicationModalID.style.display = styles.display;
    }
  }

  function productPanelMessageListener(msg) {
    if (msg.data.type === "changeProductPanelIFrameStyles") {
      changeProductPanelIFrameStyles(msg.data.value);
    }

    if (msg.data.type === "openSyndicationModalIFrame") {
      openSyndicationModalIFrame(msg.data.value);
    }
  }
</script>

Solution

#1: You can not create an element with specific class name newProductPanelContainer with just document.createElement("newProductPanelContainer")

you can use the 2nd parameter to do that (the options) refer this

#2: You can not get the DOM of un-mount element const productPanelIFrame = document.getElementById("productPanelIFrame");

the Iframe.productPanelIFrame is the children of div.newProductPanelContainer. But you can see, its parent has not mounted yet.

This Question was asked in StackOverflow by Joseph and Answered by Hao.Le It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.