为什么 .data="[filepath]" 在 Internet Explorer 中不起作用？

Question

我有一个显示 PDF 文档的页面。本文档有多个版本。我有一个不同版本的下拉列表。用户可以 select 他们想要的版本，并且在 selection 之后，页面上的 PDF 文档会更改，网页上的标题也会更改以反映文档版本。这是通过一些简单的 JavaScript.

完成的

它目前在 Chrome 和 Firefox 中运行良好。但是在 Internet Explorer（版本 11）中，显示的 PDF 不会改变。仅 H1 标题发生变化。

我检查了控制台日志，没有错误。我试过其他方法，例如：

document.getElementById("pdfView").setAttribute("data", "filepath.pdf");

但问题是一样的（而且我读到这在 IE 中不起作用）。我一直在寻找一种可行的替代方法，因为我使用的方法似乎与 IE 不兼容。

/* Title of document */ 

<h1 id="docTitle">Document title (version 1)</h1>

/* The dropdown list to select a document version */

<select id="documentList" onchange="selectDocument()">
   <option value="v1">Document v1</option>
   <option value="v2">Document v2</option>
</select>

/* The PDF viewer which displays the file. By default, latest version. */

<div id="pdfViewerStyle">
    <object data="filev2.pdf" id="pdfView" type="application/pdf" 
     width="100%" height="100%">
    </object>
</div>

/*The JavaScript to allow H1 title and pdf filepath to change and dynamically update page depending on user's selection.*/

function selectDocument() {

    var index = document.getElementById("documentList").selectedIndex;

    // if the document selected is version 1
    if(index == 0) {
      //change the title
      document.getElementById("docTitle").innerHTML="Document title (version 1)";

      //change the pdf viewer filepath to the version 1 document
      document.getElementById("pdfView").data="filev1.pdf";
    }

    // if the document selected is version 2
    else if (index == 1) {
      //change the title
      document.getElementById("docTitle").innerHTML="Document title (version 2)";

      //change the pdf viewer filepath to the version 2 document
      document.getElementById("pdfView").data="filev2.pdf";
    }

}

Answer 1

我测试了你的代码并重现了这个问题。然后我尝试使用 <iframe> 而不是 <object>，它可以在所有浏览器中正常工作。您可以像下面这样更改代码的某些部分：

/* The PDF viewer which displays the file. By default, latest version. */

<div id="pdfViewerStyle">
    <iframe src="filev2.pdf" width="800" height="600" id="pdfView"></iframe>
</div>

当用户 select 时更改 src 的 <iframe> 版本：

// if the document selected is version 1
document.getElementById("pdfView").src = "filev1.pdf";

// if the document selected is version 2
document.getElementById("pdfView").src = "filev2.pdf";

为什么 .data="[filepath]" 在 Internet Explorer 中不起作用？

Why doesn't .data="[filepath]" work in Internet Explorer?

html

javascript

internet-explorer