Working with the HTML iFrame Element in Velo

Ask the community
,
1

Product:
Velo, iFrame, HTML embed, dropdown

What are you trying to achieve:
I want to display an archive of PDF files on a single page on our public library’s new Wix site. I have basic embedding of the PDF viewer worked out and a license.

What I’m interested in this: my PDF Viewer is embedded in the Wix page using the html embed element, using an iframe. I have two drop-down selection boxes on this page, and they are for year and month, respectively. I want to message the selected year and then the selected month to the PDF viewer script to simply augment and load a different URL based on the selection. All PDFs are hosted elsewhere on a Digital Ocean droplet just for file serving.

Is this possible? My current html embed is this:

    <div id="pspdfkit" style="width: 100%; height: 100%; max-width: 1920px;"></div>
    <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@2024.5.2/pspdfkit.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            if (PSPDFKit !== undefined && typeof PSPDFKit === "object") {
                PSPDFKit.load({
                    container: "#pspdfkit",
                    document: "https://domain.tld/1962_December_etc.pdf",
                    // licenseKey: "foo-bar",
                });
            } else {
                console.error("PSPDFKit library not found");
            }
        });
    </script>

How feasible is this, using two dropdowns? I’m not familiar with JavaScript coding, though I can vaguely follow along and work things out slowly. We have about twenty years of issues (they’ve been combined by month), so this sort of solution is key to surfacing them without creating a million Wix pages. I don’t think that the CMS functionality is suited to this problem, due especially to the iframe isolation of code, though I could be wrong.

What have you already tried:
(Working with the HTML iFrame element with Velo.) (Working with the HTML iframe Element)

Additional information:
This project is to surface historical records to the public via the new website for a public library, particularly old local newspapers. Your help is invaluable and much appreciated.

2

Hello,

I have an update: I have this code which is just a trial page outside of Wix to prove the core concept. Now I need to figure out how to do the messaging from the native Wix dropdown to inside the HTML embed. I know this is probably trivial, but I’m having trouble connecting the dots.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>foo.org</title>
	</head>
	<body>

	<select id="yearDropdown">
		<option value="1962">1962</option>
		<option value="1963">1963</option>
		<option value="1964">1964</option>
		<option value="1965">1965</option>
		<option value="1966">1966</option>
		<option value="1967">1967</option>
		<option value="1968">1968</option>
		<option value="1969">1969</option>
		<option value="1970">1970</option>
		<option value="1971">1971</option>
		<option value="1972">1972</option>
	</select>

	<select id="monthDropdown">
		<option value="January">January</option>
		<option value="February">February</option>
		<option value="March">March</option>
		<option value="April">April</option>
		<option value="May">May</option>
		<option value="June">June</option>
		<option value="July">July</option>
		<option value="August">August</option>
		<option value="September">September</option>
		<option value="October">October</option>
		<option value="November">November</option>
		<option value="December">December</option>
	</select>

	<div id="pspdfkit" style="width: 100%; height: 100%; max-width: 1920px;"></div>
	<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@2024.5.2/pspdfkit.js"></script>
	<script>

		let currentDocumentUrl = "https://foo.org/1962_September_filename.pdf"; // Default PDF

		function loadPdf(url) {
			document.addEventListener("DOMContentLoaded", () => {
				if (PSPDFKit !== undefined && typeof PSPDFKit === "object") {
					PSPDFKit.load({
						container: "#pspdfkit",
						document: url,
						// licenseKey: "YOUR_LICENSE_KEY_GOES_HERE",
					});
				} else {
					console.error("PSPDFKit library not found");
				}
			});
		}

		document.addEventListener("DOMContentLoaded", () => {
			loadPdf(currentDocumentUrl); // Load the default PDF

			const yearDropdown = document.getElementById("yearDropdown");
			const monthDropdown = document.getElementById("monthDropdown");

			function updatePdf() {
				const year = yearDropdown.value;
				const month = monthDropdown.value;
				currentDocumentUrl = `https://foo.org/${year}_${month}_filename.pdf`; // Construct new URL
				loadPdf(currentDocumentUrl); // Load the new PDF
			}

			yearDropdown.addEventListener("change", updatePdf); // Update on year change
			monthDropdown.addEventListener("change", updatePdf); // Update on month change
		});
	</script>
</body>
</html>