This is mostly for my own future reference, because i always forget what the names of the parameters are.

When embedding PDF documents in iframes, you can control exactly how they display using URL parameters. This guide covers all available parameters for customizing the PDF viewing experience in your web applications.

Basic iframe Embedding

The simplest PDF embed:

<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf" width="100%" height="600"></iframe>

With parameters:

<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#page=3&zoom=150" width="100%" height="600"></iframe>

Parameter Syntax

Parameters are added to the PDF URL using # for the first parameter and & for subsequent ones:

<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#page=5&zoom=200&toolbar=0"></iframe>

Navigation Parameters

page

Opens the PDF at a specific page. Useful for documentation sites or multi-chapter resources.

<!-- Jump directly to page 5 -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#page=5"></iframe>

nameddest

Navigates to a named destination (bookmark) within the PDF. Ideal for linking to specific sections.

<!-- Navigate to a chapter -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#nameddest=Chapter3"></iframe>

Display Control Parameters

zoom

Controls the zoom level. Can include optional scroll coordinates.

<!-- 150% zoom -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#zoom=150"></iframe>

<!-- 200% zoom, scrolled to position (100, 50) -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#zoom=200,100,50"></iframe>

view

Determines how the page fits within the iframe:

<!-- Fit entire page -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#view=Fit"></iframe>

<!-- Fit page width -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#view=FitH"></iframe>

<!-- Fit page width at y-position 100 -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#view=FitH,100"></iframe>

<!-- Other options: FitV, FitB, FitBH, FitBV -->

viewrect

Displays a specific rectangular area of the page:

<!-- Show rectangle: left=50, top=100, width=400, height=300 -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#page=2&viewrect=50,100,400,300"></iframe>

Interface Customization

These parameters help create a cleaner embedded experience by hiding UI elements:

toolbar

<!-- Hide the PDF toolbar -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#toolbar=0"></iframe>

navpanes

<!-- Hide navigation panes (bookmarks, thumbnails) -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#navpanes=0"></iframe>

scrollbar

<!-- Hide scrollbars -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#scrollbar=0"></iframe>

pagemode

Controls which panels are visible:

<!-- Show bookmarks panel -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#pagemode=bookmarks"></iframe>

<!-- Show thumbnails -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#pagemode=thumbs"></iframe>

<!-- Hide all panels (default) -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#pagemode=none"></iframe>

Interactive Features

search

Opens with search panel and pre-filled search terms:

<!-- Search for "installation" when PDF opens -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#search='installation'"></iframe>

highlight

Highlights a specific area (useful for drawing attention):

<!-- Highlight area on page 3 -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#page=3&highlight=100,400,200,300"></iframe>

comment

Opens a specific comment (requires comment ID):

<!-- Jump to specific comment -->
<iframe src="https://helgesver.re/files/pdf_open_parameters.pdf#page=1&comment=452fde0e-fd22-457c-84aa"></iframe>

Form Handling

fdf

Pre-fills form fields using FDF (Forms Data Format) data. FDF is Adobe's format for storing form field values separately from the PDF structure.

<!-- Load form with data -->
<iframe src="https://helgesver.re/files/sample-form.pdf#fdf=https://helgesver.re/files/sample-form-data.fdf"></iframe>

Understanding FDF Format

FDF files are text-based and follow a structure similar to PDF. Here's an example FDF file that pre-fills a developer profile form:

%FDF-1.2
%âãÏÓ
1 0 obj
<<
/FDF
<<
/Fields [
<< /T (firstName) /V (Helge) >>
<< /T (lastName) /V (Sverre) >>
<< /T (email) /V (helge.sverre@gmail.com) >>
<< /T (location) /V (Bergen, Norway) >>
<< /T (occupation) /V (All-stack Developer) >>
<< /T (currentCompany) /V (Crescat AS) >>
<< /T (role) /V (VP of Engineering) >>
<< /T (experience) /V (10+) >>
<< /T (favoriteStack) /V (TALL-stack) >>
<< /T (newsletter) /V (Yes) >>
]
/F (sample-form.pdf)
>>
>>
endobj
trailer
<<
/Root 1 0 R
>>
%%EOF

FDF Structure Explained

• Header: %FDF-1.2 identifies the FDF version
• Body: Contains field data in /T (field name) and /V (field value) pairs
• Field Reference: /F specifies the target PDF form
• Footer: Standard PDF-style object trailer

Important Notes

• The PDF must have form fields with matching names for FDF to work
• Not all PDF viewers support the fdf parameter
• For security, browsers may restrict loading FDF from different domains
• Field names are case-sensitive and must match exactly

Common iframe Implementations

Documentation Viewer

<!-- Clean documentation view -->
<iframe
  src="https://helgesver.re/files/pdf_open_parameters.pdf#page=1&view=FitH&toolbar=0&navpanes=0"
  width="100%"
  height="800"
  style={{ border: "none" }}
></iframe>

Contract Display

<!-- Focus on signature page with zoom -->
<iframe
  src="https://helgesver.re/files/pdf_open_parameters.pdf#page=8&zoom=150&view=FitH&scrollbar=1"
  width="100%"
  height="600"
  style={{ border: "1px solid #ccc" }}
></iframe>

Presentation Embed

<!-- Full-screen style presentation -->
<iframe
  src="https://helgesver.re/files/pdf_open_parameters.pdf#page=1&view=Fit&toolbar=0&navpanes=0&scrollbar=0"
  width="100%"
  height="100vh"
  style={{ border: "none" }}
></iframe>

Dynamic Parameter Updates

You can update iframe parameters with JavaScript:

function goToPage(pageNum) {
  const iframe = document.getElementById("pdfViewer");
  const baseUrl = "https://helgesver.re/files/pdf_open_parameters.pdf";
  iframe.src = `${baseUrl}#page=${pageNum}&zoom=100`;
}

function searchInPDF(term) {
  const iframe = document.getElementById("pdfViewer");
  const baseUrl = "https://helgesver.re/files/pdf_open_parameters.pdf";
  iframe.src = `${baseUrl}#search="${term}"`;
}

React Component Example

function PDFViewer({ url, page = 1, zoom = 100, showToolbar = true }) {
  const params = [`page=${page}`, `zoom=${zoom}`, `toolbar=${showToolbar ? 1 : 0}`].join("&");

  return <iframe src={`${url}#${params}`} width="100%" height="600" style={{ border: "none" }} />;
}

Browser Considerations

• Chrome/Edge: Full parameter support
• Firefox: May require PDF.js for some parameters
• Safari: Limited parameter support on iOS
• Mobile: Touch gestures override some zoom parameters

Security Notes

When embedding PDFs from external sources:

<!-- Add sandbox attribute for external PDFs -->
<iframe src="https://external-site.com/external-doc.pdf#page=1" sandbox="allow-scripts allow-same-origin"></iframe>

Parameter Reference

Parameter	Values	Description
page	Integer (1+)	Page number to display
zoom	Number[,left,top]	Zoom percentage and optional position
view	Fit, FitH, FitV, etc.	Page fitting mode
toolbar	0 or 1	Show/hide toolbar
navpanes	0 or 1	Show/hide navigation panes
scrollbar	0 or 1	Show/hide scrollbars
pagemode	none, bookmarks, thumbs	Panel display mode
search	"search terms"	Pre-fill search
highlight	left,right,top,bottom	Highlight rectangle

Limitations

• Parameters cannot exceed 32 characters each
• No URL encoding for special characters in parameters
• Some parameters not supported in all PDF viewers
• Mobile browsers may ignore certain UI parameters
• Cross-origin PDFs may have restricted functionality

Source

• Parameters for Opening PDF Files.pdf