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

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.

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