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?

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?

• javascript
• jquery
• asp
• pdf
• iframe

• 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 Commented Apr 19, 2016 at 8:48
• @Lesmian: test-doc./test/FileStorage/20160407/Input/… 013043.pdf is the path...i am able to view the doc inside iframe.but getting error while getting contentWindow details. – AcAnanth Commented Apr 19, 2016 at 9:02
• Can you again give pdf url, as its not working for me? – INDIA IT TECH Commented Apr 19, 2016 at 13:28
• @PiyushKhatri: it is a local link.Please try with any external pdf url. – AcAnanth Commented Apr 20, 2016 at 4:18

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

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 e 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.

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