从iframe外部开始拖动事件时，iframe中的元素变暗

Question

我的屏幕上有一个iframe，该iframe与Web应用程序位于同一域中。

当用户初始化拖动事件时，我希望iframe中的所有元素都变暗（因此稍微变淡为黑色），并且任何类为drop-box-placeholder的元素都必须保持“白色”。我该如何完成？

到目前为止，这是我的代码：

  // Dim background colour 

  function dimBackground() {
    $(document).ready(function () {
      const iframe = document.getElementById('builder-showcase');
      const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      iframeDocument.getElementsByTagName('body')[0].style.backgroundColor = "black";
    });
  }

  // Undim background 

  function undimBackground() {
    $(document).ready(function () {
      const iframe = document.getElementById('builder-showcase');
      const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      iframeDocument.getElementsByTagName('body')[0].style.backgroundColor = "";
    });
  }

  // Drag start event

  $(document).on('dragstart', componentIconClass, function (e) {
    dimBackground()
    componentDragStarted(e);
  });

  // Drag end event

  $(document).on('dragend', componentIconClass, function () {
    undimBackground()
    componentDragEnded(builderShowcase);
  });