src 更改后 iframe 不加载内容 | Javascript

Question

我目前正在写一个 website 应该运行在 info terminal.
它有一个 <iframe> 显示从 menu.

中选择的内容

菜单包含 PDFs 和一个 Schedule 员工菜单。
PDF reader 和 Schedule 都在单独的 HTML 文档中。
它们都工作得很好，但是 !

当我更改 frame.

中的文档 src 时出现问题

var iframe = document.getElementById('iframe');
iframe.src = src_clicked;

我正在使用 pdf.js 渲染 PDF。我在 <canvas> 上呈现每个页面并将它们全部附加到 <div>。当我以 PDF 开始页面时，一切正常！但是当我的 iframe 之前有一个不同的 src 时，它不会再将渲染的页面附加到我的容器中。

我试过像这样在 iframe 中重新加载页面。但它什么也没做。

var ifrm = document.getElementById("iframe");
var iframeDoc = ifrm.contentWindow.document;
ifrm.contentWindow.location.reload(true);

这就是我使用 pdf.js:

渲染 PDF 的方式

PDFJS.getDocument(pageUrl).then(function(pdf) {
        var currentPage = 1;
        var pages = [];
        pdf.getPage(currentPage).then(renderPage);
        function renderPage(page) {
            var canvas = document.createElement('canvas');
            ... //define renderContext
            var renderContext = { ... };
            page.render(renderContext).then(function () {
                if(currentPage < pdf.numPages + 1) {
                    pages[currentPage-1] = canvas;
                    pdf.getPage(currentPage++).then(renderPage);
                }
            });
        }
    });

我不知道我做错了什么。
请帮助我

Answer 1

我就是这样解决的：

显示 PDF 时，我删除了 iFrame：

document.getElementById('container').innerHTML = "";

loadPDF(pdfPath);

并将文档直接附加到 <div>

当我再次显示网页内容时，我附加了一个新的 iFrame:

document.getElementById('container').innerHTML =
         '<iframe id="iframe" type="text/html" src="' + websiteURL + '" ></iframe>';

并给出全尺寸：

#iframe{
    width:  100%;
    height: 100%;
    display:block;
}

src 更改后 iframe 不加载内容 | Javascript

Iframe doen't load content after src changed | Javascript

html

javascript

pdf

iframe

appendchild