Display specific pdf page inside iframe in Asp.net

Question

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

The iframe code is as follows:

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

and follow the text box information

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

Javascript function details

 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 that does not work. It gives an error in "childiFrame.contentWindow.location.href", because the request for access to the frame request has the protocol "http", the accessed frame has the protocol "https". Protocols must comply.

How can I get rid of the error? And I am passing the page not as a parameter in the url. How can I show a new page without updating all content?

Answer 1

As indicated here: The access request to the frame has the https protocol, while the available frame has the http protocol. The protocols should match here: An error when trying to access the iframe in JavaScript, the iframe may show content on the other hand, but you can’t change it in any way, because it will cause a security risk. If you want to change the contents of the iframe, its source must come from the same domain (refer to CORS for an additional link).

Another way is to enable Cross-Origin sharing of resources for other domains. To do this, you need to specify a special header:

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

Additional information on 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 opens in an iframe on 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 must be done asynchronously to work (here with setTimeout ).

Markup for iframe and 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:

 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 with a new one every time a new PDF page is displayed. To reduce screen flickering: (1) a new iframe is inserted under the old one, and (2) the old iframe is only removed when the new one is fully loaded.

Markup:

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

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