需求：RNApp項(xiàng)目中加載別人的網(wǎng)頁(yè)，加載完畢通過(guò)注入script的方式修改html內(nèi)容和事件歼狼。

坑的原因：document.getElementsByClassName 是動(dòng)態(tài)獲取的恋拍，并不是一個(gè)數(shù)組沽瞭，每次改變都會(huì)重新獲取

填坑前：

var mediaPlayList = document.getElementsByClassName('mediadetail_play');
        for (var i = 0; i < mediaPlayList.length; i++) {
          console.log(i);
          const mediaPlayItem = mediaPlayList[i];
          var willReplaceNode = null;
          var allBrotherNode = null;
          if (mediaPlayItem.parentNode.nodeName == 'A') {
            willReplaceNode = mediaPlayItem.parentNode.parentNode;
          } else {
            willReplaceNode = mediaPlayItem.parentNode;
          }
          allBrotherNode = willReplaceNode.children;


          const dataId = mediaPlayItem.dataset.id;
          var dataTitle = '';
          for (var j = 0; j < allBrotherNode.length; j++) {
            var brotherNode = allBrotherNode[j];
            if (brotherNode.nodeName == 'SPAN' && brotherNode.className.length == 0) {
              dataTitle += brotherNode.innerText;
            }
          }
          dataTitle = dataTitle.slice(1, dataTitle.length - 1);

          const willReplaceParentNode = willReplaceNode.parentNode;
          var newNode = document.createElement('div');
          newNode.dataset.id = dataId;
          newNode.innerHTML = "<div\n" +
            "      style=\"position: relative; display: flex; flex-direction: column; justify-content: center;align-items: center; margin: 10px 0; padding: 0 20px; background-color: #4273C4; width: 100%; height: 210px;\">\n" +
            "      <div style=\"display: flex; align-items: center; align-self: flex-start; margin-top: -30px;\">\n" +
            "        <img src=\"https://store.51yxxg.com/%E7%BF%BC%E4%BC%B4%E5%AD%A6logo.png\" style=\"width: 60px; height: 60px;\">\n" +
            "        <span style=\"font-family:宋體; font-size:16px; color: #ffffff;margin-left: 10px;\">翼麥優(yōu)學(xué)同步課程視頻</span>\n" +
            "      </div>\n" +
            "      <span style=\"font-family:宋體; font-size:20px; color: #f6c73d; margin-top: 5px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;\">" + dataTitle + "</span>\n" +
            "      <img src=\"https://store.51yxxg.com/%E6%92%AD%E6%94%BE.png\" style=\"width: 44px; height: 44px; margin-top: 10px;\">\n" +
            "    </div>";

          newNode.onclick = function () {
            window.postMessage('' + dataId);
          };

          willReplaceParentNode.replaceChild(newNode, willReplaceNode);
        }

問(wèn)題：遍歷的dom只修改一半激挪，也就是奇數(shù)項(xiàng)

填坑中：

var originmediaPlayList = document.getElementsByClassName('mediadetail_play');
        var mediaPlayList = [];
        for (var i = 0; i < originmediaPlayList.length; i++) {
          mediaPlayList.push(originmediaPlayList[i]);
        }
        for (var i = 0; i < mediaPlayList.length; i++) {
          console.log(i);
          const mediaPlayItem = mediaPlayList[i];
          var willReplaceNode = null;
          var allBrotherNode = null;
          if (mediaPlayItem.parentNode.nodeName == 'A') {
            willReplaceNode = mediaPlayItem.parentNode.parentNode;
          } else {
            willReplaceNode = mediaPlayItem.parentNode;
          }
          allBrotherNode = willReplaceNode.children;


          const dataId = mediaPlayItem.dataset.id;
          var dataTitle = '';
          for (var j = 0; j < allBrotherNode.length; j++) {
            var brotherNode = allBrotherNode[j];
            if (brotherNode.nodeName == 'SPAN' && brotherNode.className.length == 0) {
              dataTitle += brotherNode.innerText;
            }
          }
          dataTitle = dataTitle.slice(1, dataTitle.length - 1);

          const willReplaceParentNode = willReplaceNode.parentNode;
          var newNode = document.createElement('div');
          newNode.dataset.id = dataId;
          newNode.innerHTML = "<div\n" +
            "      style=\"position: relative; display: flex; flex-direction: column; justify-content: center;align-items: center; margin: 10px 0; padding: 0 20px; background-color: #4273C4; width: 100%; height: 210px;\">\n" +
            "      <div style=\"display: flex; align-items: center; align-self: flex-start; margin-top: -30px;\">\n" +
            "        <img src=\"https://store.51yxxg.com/%E7%BF%BC%E4%BC%B4%E5%AD%A6logo.png\" style=\"width: 60px; height: 60px;\">\n" +
            "        <span style=\"font-family:宋體; font-size:16px; color: #ffffff;margin-left: 10px;\">翼麥優(yōu)學(xué)同步課程視頻</span>\n" +
            "      </div>\n" +
            "      <span style=\"font-family:宋體; font-size:20px; color: #f6c73d; margin-top: 5px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;\">" + dataTitle + "</span>\n" +
            "      <img src=\"https://store.51yxxg.com/%E6%92%AD%E6%94%BE.png\" style=\"width: 44px; height: 44px; margin-top: 10px;\">\n" +
            "    </div>";

          newNode.onclick = function () {
            window.postMessage('' + dataId);
          };

          willReplaceParentNode.replaceChild(newNode, willReplaceNode);
        }

問(wèn)題：iOS和web端完美解決爬迟，Android只修改了第一項(xiàng)橘蜜。。。计福。

填坑后：

const yiclass_weclass_detaill_replace = function() {
        var mediaPlayList = document.getElementsByClassName('mediadetail_play');
          if (mediaPlayList.length == 0) return
          const mediaPlayItem = mediaPlayList[0];
          var willReplaceNode = null;
          var allBrotherNode = null;
          if (mediaPlayItem.parentNode.nodeName == 'A') {
            willReplaceNode = mediaPlayItem.parentNode.parentNode;
          } else {
            willReplaceNode = mediaPlayItem.parentNode;
          }
          allBrotherNode = willReplaceNode.children;


          const dataId = mediaPlayItem.dataset.id;
          var dataTitle = '';
          for (var j = 0; j < allBrotherNode.length; j++) {
            var brotherNode = allBrotherNode[j];
            if (brotherNode.nodeName == 'SPAN' && brotherNode.className.length == 0) {
              dataTitle += brotherNode.innerText;
            }
          }
          dataTitle = dataTitle.slice(1, dataTitle.length - 1);

          const willReplaceParentNode = willReplaceNode.parentNode;
          var newNode = document.createElement('div');
          newNode.dataset.id = dataId;
          newNode.innerHTML = "<div\n" +
            "      style=\"position: relative; display: flex; flex-direction: column; justify-content: center;align-items: center; margin: 10px 0; padding: 0 20px; background-color: #4273C4; width: 100%; height: 210px;\">\n" +
            "      <div style=\"display: flex; align-items: center; align-self: flex-start; margin-top: -30px;\">\n" +
            "        <img src=\"https://store.51yxxg.com/%E7%BF%BC%E4%BC%B4%E5%AD%A6logo.png\" style=\"width: 60px; height: 60px;\">\n" +
            "        <span style=\"font-family:宋體; font-size:16px; color: #ffffff;margin-left: 10px;\">翼麥優(yōu)學(xué)同步課程視頻</span>\n" +
            "      </div>\n" +
            "      <span style=\"font-family:宋體; font-size:20px; color: #f6c73d; margin-top: 5px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;\">" + dataTitle + "</span>\n" +
            "      <img src=\"https://store.51yxxg.com/%E6%92%AD%E6%94%BE.png\" style=\"width: 44px; height: 44px; margin-top: 10px;\">\n" +
            "    </div>";

          newNode.onclick = function () {
            window.postMessage('' + dataId);
          };

          willReplaceParentNode.replaceChild(newNode, willReplaceNode);
      }

      var originmediaPlayList = document.getElementsByClassName('mediadetail_play');
      var timesArr = []
      for (var i = 0; i < originmediaPlayList.length; i++) {
        timesArr.push(i)
      }
      for (var i = 0; i < timesArr.length; i++) {
        yiclass_weclass_detaill_replace()
      }