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”协议。协议必须匹配。

如何摆脱错误？我在网址中传递了页面号码作为参数。如何在不刷新整个内容的情况下显示新页面？

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时，在所选页码的iframe中打开本地PDF。

方法1

在此方法中，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);
}

方法2

在此方法中，每次要显示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);
}

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

2 个答案: