Displaying a specific page of PDF inside iframe in Asp.net

Question

I have an ASP.NET C# application. I am displaying a PDF file at a specific page inside an iframe. I need to display a specific page of PDF based on a text box value. How can I achieve this ?

The iframe code looks like this:

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

and following is the the details of the text box

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

Details of javascript function

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);

        }

But this is not working. It is giving error at "childiFrame.contentWindow.location.href" as The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

How can i get rid of the error? And i am passing page no as a paramter in the url. How can i show the new page without refreshing entire content?

Answer 1

As stated here: The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match and here: Error trying to access a iframe in JavaScript the iframe can show content from other side, but you cannot change it in any way, because it would cause security risk. If you want to change the content of the iframe it source must come from same domain (refer to CORS for more reference).

Another way is to allow Cross-Origin Resource Sharing for other domains. In order to do that you need to specify special header:

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

More info about this topic: http://enable-cors.org/server_aspnet.html, http://docs.asp.net/en/latest/security/cors.html.

Answer 2

In both methods shown below, a local PDF is opened in an iframe, at the selected page number, when the focus leaves the TextBox.

Method 1

In this method, the iframe source URL is set in two steps. The first step resets the source, the second sets it to the actual URL. This second step has to be performed asynchronously in order to work (here with the help of setTimeout).

The markup for the iframe and the TextBox:

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

The Javascript function:

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

Method 2

In this method, the iframe is replaced by a new one each time a new page of the PDF is to be displayed. In order to reduce screen flicker: (1) the new iframe is inserted under the old one, and (2) the old iframe is removed only when the new one is fully loaded.

The markup:

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

The Javascript code:

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);
}