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?

What is an initial url of your iframe? The error states that your site runs on http and iframe source url points to https. You can access iframe only if the source url points to same domain as your website. — Lesmian, Apr 19 '16 at 08:48
@Lesmian: https://www.test-doc.com/test/FileStorage/20160407/Input/Test400_358767_04132016 013043.pdf is the path...i am able to view the doc inside iframe.but getting error while getting contentWindow details. — AcAnanth, Apr 19 '16 at 09:02
@PiyushKhatri: it is a local link.Please try with any external pdf url. — AcAnanth, Apr 20 '16 at 04:18

ConnorsFan · Answer 1 · 2016-04-23T03:13:58.737

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

Is there any way to switch betwwn pdf without iframe reload? my PDF file size will be 50Mb or more..So it will take time to reload which is not accepatable..pls help — AcAnanth, Apr 26 '16 at 05:50
It doesn't seem to be possible only with the URL. If I load the PDF in the main window of the browser, and then I modify the page number in the address bar, the PDF does not change page unless I click the reload button in IE and Firefox, and it reloads the document to change page in Chrome. — ConnorsFan, Apr 26 '16 at 13:16

score 3 · Answer 2 · edited May 23 '17 at 10:33

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.

How can i show a specific page in the iframe? current code is not working in Chrome and IE works with mozilla. — AcAnanth, Apr 19 '16 at 11:13

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

2 Answers2