在 Asp.net 的 iframe 中显示 PDF 的特定页面

Question

我有一个 ASP.NET C# 应用程序。我在 iframe 内的特定页面上显示 PDF 文件。我需要根据文本框值显示 PDF 的特定页面。我怎样才能做到这一点？

iframe 代码如下所示：

<iframe runat="server" id="lobjPDFObj" height="600" width="800" > </iframe>

以下是文本框的详细信息

<asp:TextBox ID="txtTo" runat="server" Text="1" class="page_txtbox" onfocus="synchronizePDF(this);" ></asp:TextBox>

javascript函数详情

function synchronizePDF(Field) {
            //parent.document.getElementById('lobjPDFObj').setCurrentPage(Field.value);
        var childiFrame = parent.document.getElementById('lobjPDFObj');           
        var URL = childiFrame.contentWindow.location.href;
        //var URL = childiFrame.src;               
        var pos = URL.indexOf('#page');
        if (pos < 0) pos = URL.length;
        var result = URL.substring(0, pos);
        if (URL != 'about:blank') {
            result += '#page=' + Field.value;
        }
        childiFrame.contentWindow.location.reload(true);
        childiFrame.contentWindow.location.href = result;
        //childiFrame.src = result;
        //parent.document.getElementById('lobjPDFObj').setAttribute("src", result);

        }

但这不起作用。它在“childiFrame.contentWindow.location.href”处给出错误，因为请求访问的框架具有“http”协议，正在访问的框架具有“https”协议。协议必须匹配。

我怎样才能摆脱错误？我在 url 中将 page no 作为参数传递。如何在不刷新整个内容的情况下显示新页面？

Answer 1

如此处所述：The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match 和此处：Error trying to access a iframe in JavaScript iframe 可以显示来自另一侧的内容，但您不能以任何方式更改它，因为这会导致安全风险。如果您想更改 iframe 的内容，则它的来源必须来自同一个域（请参阅 CORS 以获取更多参考）。

另一种方法是允许其他域的跨域资源共享。为此，您需要指定特殊标题：

Access-Control-Allow-Origin: https://www.test-doc.com

有关此主题的更多信息：http://enable-cors.org/server_aspnet.html、http://docs.asp.net/en/latest/security/cors.html。

Answer 2

在下面显示的两种方法中，当焦点离开 TextBox 时，本地 PDF 会在 iframe 中以选定的页码打开。

方法一

在此方法中，iframe 源 URL 的设置分为两步。第一步重置源，第二步将其设置为实际 URL。第二步必须异步执行才能正常工作（此处借助 setTimeout）。

iframe 和 TextBox 的标记：

<iframe id="iframePdfViewer" name="iframePdfViewer" width="700px" height="700px" ></iframe>
<asp:TextBox ID="txtPageNumber" runat="server" Text="1" onchange="showPDF(this.value);" />

Javascript函数：

function showPDF(pageNumber) {
    var iframe = document.getElementById("iframePdfViewer");
    iframe.src = '';
    setTimeout(function () { iframe.src = 'MyFolder/MyDoc.pdf#page=' + pageNumber }, 0);
}

方法二

在此方法中，每次显示 PDF 的新页面时，iframe 都会被新的 iframe 替换。为了减少屏幕闪烁：(1) 新 iframe 插入到旧 iframe 之下，(2) 旧 iframe 仅在新 iframe 完全加载时移除。

标记：

<div id="divPdfViewer" style="position: relative; width: 700px; height: 700px;"></div>
<asp:TextBox ID="txtPageNumber" runat="server" Text="1" onchange="showPDF(this.value);" />

Javascript 代码：

function showPDF(pageNumber) {
    var divPdfViewer = document.getElementById('divPdfViewer');
    var ifrm = document.createElement("IFRAME");
    ifrm.id = 'iframePdfViewer';
    ifrm.style.position = 'absolute';
    ifrm.style.width = '100%';
    ifrm.style.height = '100%';
    var oldPdfViewer = divPdfViewer.firstChild;
    if (oldPdfViewer) {
        ifrm.onload = function () { divPdfViewer.removeChild(oldPdfViewer); };
        // Replace the line above by the line below if support for IE is required
        // setTimeout(function () { divPdfViewer.removeChild(oldPdfViewer); }, 100); 
        divPdfViewer.insertBefore(ifrm, oldPdfViewer);
    }
    else {
        divPdfViewer.appendChild(ifrm);
    }
    ifrm.setAttribute("src", 'MyFolder/MyDoc.pdf#page=' + pageNumber);
}