下载blob后刷新iframe


refresh iframe after downloading a blob

我的服务器上有一个文件浏览器,它使用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时,我如何使它做到这一点?

iframe的域名与您的主机网站的域名相同吗?如果没有,我们就不能在主机网站的JavaScript代码中访问它的contentDocument(或contentWindow)。

刷新iframe,根据我的理解,你可以设置它的src:

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

请注意,如果src包含一个散列标签,我们可能需要额外的工作。我想建议你检查什么's最好的方式来重新加载/刷新使用JavaScript的iframe ?查看更多信息。

根据我的经验,这是可能的,我们改变了IFrame URL,但IFrame显示预览内容。在这个场景中,我建议您可以动态地创建IFarme。例如,当您从Azure存储中获得Blob URI时,您可以尝试删除Iframe并创建一个新的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

我找到了答案,主要原因是我们不应该使用控制器来操作DOM。

document.getElementById("viewerjs_preview").contentDocument.location.reload(true)这样的

句子将不再在角范围内工作,所以你必须有一个指令来做它。我认为同样的问题和你一样,得到大多数选票的答案是有效的。

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