简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如果 IFrame 來源有 XML 錯誤，如何隱藏 HTML 頁面中的所有 IFrame？
P粉308089080
P粉308089080 2024-01-10 17:33:29
0
1
338

我在嘗試在 iframe 標記內顯示 PDF 預覽時遇到問題。我有一個頁麵包含一些iframes 以在頁面中顯示PDF 文件，問題是有時來源URL 中不存在PDF，因此iframe 顯示XML 錯誤，指出BlobNotFound。如果在 iframe 的原始程式碼中傳回該錯誤，我想隱藏 iframe。

我嘗試過下面的 JavaScript 腳本：

<script>
  const myIframe = document.getElementById('myFrame1');
  fetch('example.xml')
      .then(response => {
          if (!response.ok) {
              throw new Error('XML file not found');
          }
          return response.text();
      })
      .then(xmlString => {
          const parser = new DOMParser();
          const xmlDoc = parser.parseFromString(xmlString, "text/xml");
          // check for errors in the XML content
          const error = xmlDoc.getElementsByTagName("parsererror");
          if (error.length > 0) {
              myIframe.style.display = 'none'; // hide the iframe if there is an error
          }
      })
      .catch(error => {
          console.error(error);
          myIframe.style.display = 'none'; // hide the iframe if there is an error
      });
</script>

此程式碼有效，但前提是您透過 ID 指定 iframe 標記，並且我想重寫此程式碼以一次檢查所有 iframe。

我也嘗試過下面的程式碼：

<script>
  const iframes = document.getElementsByTagName('iframe');
  for (let i = 0; i < iframes.length; i++) {
      const iframe = iframes[i];
      fetch(iframe.src)
          .then(response => {
              if (!response.ok) {
                  throw new Error('XML file not found');
              }
              return response.text();
          })
          .then(xmlString => {
              const parser = new DOMParser();
              const xmlDoc = parser.parseFromString(xmlString, "text/xml");
              // check for errors in the XML content
              const error = xmlDoc.getElementsByTagName("parsererror");
              if (error.length > 0) {
                  iframe.style.display = 'none'; // hide the iframe if there is an error
              }
          })
          .catch(error => {
              console.error(error);
              iframe.style.display = 'none'; // hide the iframe if there is an error
          });
  }
</script>

這段程式碼應該可以工作，但不知何故它隱藏了所有 iframes 即使它沒有錯誤。

P.S.\ 這是任何無法顯示 PDF 的 iframe 的 XML 錯誤。 

<?xml version="1.0" encoding="utf-8"?>
<Error>
    <Code>BlobNotFound</Code>
    <Message>
        The specified blob does not exist.
            RequestId:xxxxxxxx
            Time:timestamp
    </Message>
</Error>

P粉308089080
P粉308089080

全部回覆(1)
P粉043295337
P粉0432953372024-01-11 12:50:34 1樓

你可以試試這個！ 

<!DOCTYPE html>
<html>
<head>
  <title>Hide Iframes with XML Error</title>
</head>
<body>
  <iframe src="path/to/pdf1.pdf"></iframe>
  <iframe src="path/to/pdf2.pdf"></iframe>
  <iframe src="path/to/nonexistent.pdf"></iframe>
  <iframe src="path/to/pdf3.pdf"></iframe>
  <script>
    var iframes = document.getElementsByTagName('iframe');
    for (var i = 0; i < iframes.length; i++) {
      var iframe = iframes[i];
      iframe.contentWindow.addEventListener('error', function(event) {
        if (event.message === 'BlobNotFound') {
          // Hide all iframes if any one of them has an XML error
          for (var j = 0; j < iframes.length; j++) {
            iframes[j].style.display = 'none';
          }
        }
      });
    }
  </script>
</body>
</html>

請告訴我它是否有效。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！