下载 blob 后刷新 iframe

Question

我的服务器上有一个文件浏览器，它使用 Azure 存储来存储文件。该网站有一个功能，当你点击一个文件时，它会弹出一个详细信息窗口。我使用 ViewerJS 显示文件的 pdf 预览（如果适用），一切都很好。唯一的问题是下载预览文件时，您必须手动重新加载预览 iframe 才能显示。相关php函数为：
http://pastebin.com/sAyhsbfi
当这个函数完成时（我正在使用 ajax），$.done 函数调用
response = JSON && JSON.parse(response) || jQuery.parseJSON(response); $scope.pdfthingy=response;document.getElementById("viewerjs_preview").contentDocument.location.reload(true);
其中第一行的response 设置为pdf 预览文件的完整路径名，viewerjs_preview 是相关iframe 的ID。
出于某种原因，这不起作用，并且 iframe 不会自行重新加载。当 blob 完成下载并设置 pdfthingy 时，我该如何做到这一点？

Answer 1

iframe 的域是否与您的托管网站的域相同？否则，我们无法在宿主网站的 JavaScript 代码中访问其 contentDocument（或 contentWindow）。

要刷新 iframe，据我了解，您可以设置其 src：

document.getElementById('viewerjs_preview').src = document.getElementById('viewerjs_preview').src;

请注意，如果 src 包含哈希标签，我们可能需要额外的工作。建议您查看What's the best way to reload / refresh an iframe using JavaScript? 了解更多信息。

Answer 2

根据我的经验，我们可能更改了 IFrame URL，但 IFrame 显示了预览内容。在这种情况下，我建议您可以创建 Ifarme 动态。例如，当您从 Azure 存储中获得 Blob URI 时，您可以尝试删除 Iframe 并创建一个新的。例如，如果您的预览内容在 iframe 中显示为：

<iframe id="viewerjs_preview" src = "/ViewerJS/#../azure blob storage url /pre-blobname .pdf " width='400' height='300' allowfullscreen webkitallowfullscreen></iframe> 

您可以尝试使用此代码：

function recreateIFM() {
            document.getElementById("viewerjs_preview").parentNode.removeChild(document.getElementById("viewerjs_preview"));
            var ifm = document.createElement("iframe");
            ifm.id = "viewerjs_preview";
            ifm.width = "600px";
            ifm.height = "400px";
            ifm.src = "/ViewerJS/#../azure blob storage url /new-blobname .pdf";
            document.body.appendChild(ifm);

        }

另外，您可以参考 MingXu 关于如何刷新/重新加载 Iframe 的参考。

问候， Bill_Sww

Answer 3

我找到答案了，主要原因是we shouldn't use controllers to manipulate DOM.

像document.getElementById("viewerjs_preview").contentDocument.location.reload(true) 这样的句子在角度范围内将不再起作用，因此您必须使用指令来执行此操作。我想和你一样的问题是and which's answer with most votes dose work well.

Answer 4

我想我的问题可能不清楚，对此我深表歉意。明天我会尝试回去编辑它。
我的解决方案是，而不是使用 angularjs 设置 iframe 的 src 属性，而是直接使用
document.getElementById("iframe-id").src=/path_where_I_put_the_files/filename
设置它 （作为参考，我使用“pdfthingy”来存储下载 blob 的 ajax 调用返回的文件名）。
这阻止了 iframe 在设置文件名之前加载空源。 这也许是 walkformusle 说不应该以这种方式控制 DOM 的部分原因。