我在嘗試在 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粉0432953372024-01-11 12:50:34
你可以試試這個！
<!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>
請告訴我它是否有效。