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网址，但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

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

Answer 4

我找到答案，主要原因是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.

下载blob后刷新iframe

4 个答案: