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

【问题标题】：Iframe doen't load content after src changed | Javascriptsrc 更改后 iframe 不加载内容 | Javascript
【发布时间】：2016-01-29 14:53:33
【问题描述】：

我目前正在编写一个应该在 info terminal 上运行的 website。
它有一个<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);
                }
            });
        }
    });

我不知道我在这里做错了什么。
请帮帮我

【问题讨论】：

你能把你的代码的html部分贴出来吗？
您是否尝试过删除 iframe 并使用新源重新附加它？问题是不同的浏览器加载 iframe 的方式不同，您可以使用 id 重新加载它。像这样的东西：ifrm.reload("true")，以前试过这样的东西吗？？

标签： javascript html pdf iframe appendchild

【解决方案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;
}

【讨论】：