Wix ಲೈಬ್ರರಿ ಸೈಟ್ನಲ್ಲಿ PDF ವೀಕ್ಷಕ ಕಾರ್ಯವನ್ನು ಹೆಚ್ಚಿಸುವುದು
ಸಾರ್ವಜನಿಕ ಗ್ರಂಥಾಲಯದ ವೆಬ್ಸೈಟ್ನಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು PDF ಫೈಲ್ಗಳ ವ್ಯಾಪಕ ಆರ್ಕೈವ್ ಅನ್ನು ಸಂಘಟಿತ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ರೀತಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. PDF ಗಳಾಗಿ ಸಂಗ್ರಹಿಸಲಾದ ಹಳೆಯ ವೃತ್ತಪತ್ರಿಕೆಗಳಂತಹ ಐತಿಹಾಸಿಕ ದಾಖಲೆಗಳಿಗೆ ಸಂದರ್ಶಕರಿಗೆ ತಡೆರಹಿತ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುವುದು ಗುರಿಯಾಗಿದೆ. ಈ ಯೋಜನೆಯಲ್ಲಿ, Wix, Velo ಮತ್ತು HTML ಎಂಬೆಡ್ ಅಂಶದ ಬಳಕೆಯು ದೃಢವಾದ ವ್ಯವಸ್ಥೆಗೆ ಅಡಿಪಾಯವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
Wix ನ ಪ್ಲಾಟ್ಫಾರ್ಮ್ ಐಫ್ರೇಮ್ಗಳ ಮೂಲಕ ಎಂಬೆಡೆಡ್ ಅಂಶಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ, PDF ವೀಕ್ಷಕರಂತಹ ಸಂವಾದಾತ್ಮಕ ಘಟಕಗಳನ್ನು ಸೇರಿಸಲು ಬಳಕೆದಾರರಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಈ PDF ವೀಕ್ಷಕವನ್ನು iframe ಬಳಸಿಕೊಂಡು ಎಂಬೆಡ್ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಪ್ರಸ್ತುತ, ಯಾವ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಸ್ಥಿರ URL ವಿವರಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಬಳಕೆದಾರರ ಇನ್ಪುಟ್ನ ಆಧಾರದ ಮೇಲೆ PDF ಫೈಲ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಯಿಸುವ ಅಗತ್ಯವು ಸುಗಮ ಅನುಭವಕ್ಕಾಗಿ ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ.
ಎರಡು ಡ್ರಾಪ್ಡೌನ್ಗಳಿಂದ ಒಂದು ವರ್ಷ ಮತ್ತು ತಿಂಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಬಳಕೆದಾರರಿಗೆ ಅವಕಾಶ ನೀಡುವುದು ಸವಾಲಾಗಿದೆ, ಅದು ನಂತರ ಪ್ರದರ್ಶಿಸಲಾದ PDF ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಬದಲಾವಣೆಯನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. ಇದು iframe ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು JavaScript ಸಂದೇಶವನ್ನು ಸಂಯೋಜಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಡ್ರಾಪ್ಡೌನ್ ಆಯ್ಕೆಗಳ ಪ್ರಕಾರ ಡಾಕ್ಯುಮೆಂಟ್ನ URL ಅನ್ನು ಬದಲಾಯಿಸಲು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
ಈ ವಿಧಾನವು ಹಲವಾರು ಸ್ಥಿರ Wix ಪುಟಗಳ ಅಗತ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಆದರೆ ಲೈಬ್ರರಿಯ PDF ಆರ್ಕೈವ್ಗೆ ಪ್ರವೇಶವನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಕೆಳಗೆ, Velo ಫ್ರೇಮ್ವರ್ಕ್ ಮತ್ತು JavaScript ಅನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಅಗತ್ಯವಿರುವ ಹಂತಗಳು ಮತ್ತು ಪರಿಹಾರಗಳನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ.
ಆಜ್ಞೆ | ಬಳಕೆಯ ಉದಾಹರಣೆ |
---|---|
PSPDFKit.load() | ಈ ವಿಧಾನವು PSPDFKit PDF ವೀಕ್ಷಕವನ್ನು ನಿರ್ದಿಷ್ಟ ಧಾರಕದಲ್ಲಿ ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಒದಗಿಸಿದ URL ನಿಂದ ಇದು PDF ಫೈಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ, ಇದು ಎಂಬೆಡ್ ಅಂಶದೊಳಗೆ ಅದನ್ನು ವೀಕ್ಷಿಸುವಂತೆ ಮಾಡುತ್ತದೆ. ಇದು ಪಿಎಸ್ಪಿಡಿಎಫ್ಕಿಟ್ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿದೆ, ಇದು ಎಂಬೆಡಿಂಗ್ ಮತ್ತು ಪಿಡಿಎಫ್ ಡಾಕ್ಯುಮೆಂಟ್ಗಳನ್ನು ವೀಕ್ಷಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. |
postMessage() | ಪೋಷಕ ವಿಂಡೋ ಮತ್ತು ಎಂಬೆಡೆಡ್ ಐಫ್ರೇಮ್ ನಡುವೆ ಸಂವಹನ ನಡೆಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಇದು ಮುಖ್ಯ ಪುಟದಿಂದ ಐಫ್ರೇಮ್ಗೆ ಸಂದೇಶವನ್ನು ಕಳುಹಿಸುತ್ತದೆ, ಡ್ರಾಪ್ಡೌನ್ ಆಯ್ಕೆಗಳ ಆಧಾರದ ಮೇಲೆ ಐಫ್ರೇಮ್ ತನ್ನ ವಿಷಯವನ್ನು (ಪಿಡಿಎಫ್ URL) ನವೀಕರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. |
window.addEventListener("message") | postMessage() ಮೂಲಕ ಕಳುಹಿಸಲಾದ ಸಂದೇಶಗಳನ್ನು ಆಲಿಸಲು ಈ ಈವೆಂಟ್ ಕೇಳುಗನನ್ನು iframe ಒಳಗೆ ಸೇರಿಸಲಾಗಿದೆ. ಸ್ವೀಕರಿಸಿದ ಡೇಟಾದ ಆಧಾರದ ಮೇಲೆ iframe ನಲ್ಲಿ ಹೊಸ PDF ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಇದು ಸಂದೇಶವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ. |
event.data | ಸಂದೇಶ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ನಲ್ಲಿ, event.data ಪೋಷಕ ವಿಂಡೋದಿಂದ ಕಳುಹಿಸಲಾದ ಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಇದು PSPDFKit ವೀಕ್ಷಕಕ್ಕೆ ಲೋಡ್ ಮಾಡಲು ಆಯ್ಕೆಮಾಡಿದ PDF ಫೈಲ್ನ URL ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. |
document.getElementById() | ಈ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್ ವಿಧಾನವು HTML ಅಂಶವನ್ನು ಅದರ ID ಮೂಲಕ ಹಿಂಪಡೆಯುತ್ತದೆ. ಡ್ರಾಪ್ಡೌನ್ ಅಂಶಗಳಿಂದ ಬಳಕೆದಾರರ ಇನ್ಪುಟ್ ಅನ್ನು ಸೆರೆಹಿಡಿಯಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, PDF URL ಅಪ್ಡೇಟ್ಗಾಗಿ ಆಯ್ಕೆಮಾಡಿದ ವರ್ಷ ಮತ್ತು ತಿಂಗಳನ್ನು ನಿರ್ಧರಿಸಲು ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಅನುಮತಿಸುತ್ತದೆ. |
DOMContentLoaded | DOM ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಮಾಡಿದ ನಂತರವೇ JavaScript ಕಾರ್ಯಗತಗೊಳ್ಳುವುದನ್ನು ಖಾತ್ರಿಪಡಿಸುವ ಈವೆಂಟ್. DOM ಅಂಶಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವುದಕ್ಕಿಂತ ಮೊದಲು ಪ್ರವೇಶಿಸಲು ಪ್ರಯತ್ನಿಸುವಾಗ ಇದು ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ. |
addEventListener("change") | ಈ ಈವೆಂಟ್ ಆಲಿಸುವವರು ಯಾವುದೇ ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಡ್ರಾಪ್ಡೌನ್ ಅಂಶಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುತ್ತಾರೆ. ಬಳಕೆದಾರರು ಬೇರೆ ವರ್ಷ ಅಥವಾ ತಿಂಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ, PDF URL ಅನ್ನು ನವೀಕರಿಸಲು ಮತ್ತು ಅನುಗುಣವಾದ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ಕಾರ್ಯವನ್ನು ಪ್ರಚೋದಿಸಲಾಗುತ್ತದೆ. |
template literals | ಟೆಂಪ್ಲೇಟ್ ಲಿಟರಲ್ಗಳು (ಬ್ಯಾಕ್ಟಿಕ್ಗಳಿಂದ ಸುತ್ತುವರಿದಿರುವುದು) ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಸ್ಟ್ರಿಂಗ್ಗಳಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ, ಆಯ್ಕೆ ಮಾಡಿದ PDF ಗಾಗಿ URL ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ರಚಿಸುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ: `https://domain.tld/${year}_${month}_etc.pdf`. |
container: "#pspdfkit" | PSPDFKit ಪ್ರಾರಂಭದಲ್ಲಿ, ಧಾರಕವು HTML ಅಂಶವನ್ನು (ID ಮೂಲಕ) ಸೂಚಿಸುತ್ತದೆ, ಅಲ್ಲಿ PDF ವೀಕ್ಷಕವನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಪುಟದಲ್ಲಿ PDF ಅನ್ನು ಎಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸಲು ಇದು ಅತ್ಯಗತ್ಯ. |
Wix ನಲ್ಲಿ ಡ್ರಾಪ್ಡೌನ್ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಡೈನಾಮಿಕ್ PDF ಲೋಡ್ ಆಗುತ್ತಿದೆ
ಈ ಪರಿಹಾರದಲ್ಲಿ, ಎಂಬೆಡೆಡ್ iFrame ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾದ PDF ಫೈಲ್ನ URL ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮಾರ್ಪಡಿಸಲು ನಾವು Wix ಪುಟದಲ್ಲಿ ಡ್ರಾಪ್ಡೌನ್ ಅಂಶಗಳ ಜೋಡಿಯನ್ನು ಬಳಸುತ್ತೇವೆ. ಆರ್ಕೈವ್ ಮಾಡಲಾದ ವೃತ್ತಪತ್ರಿಕೆ PDF ಗಳಿಗೆ ಸುಲಭ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸಲು ಸಾರ್ವಜನಿಕ ಗ್ರಂಥಾಲಯಗಳಿಗೆ ಈ ವ್ಯವಸ್ಥೆಯು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. ಪ್ರಮುಖ ಕಾರ್ಯಚಟುವಟಿಕೆಯು ಚಾಲಿತವಾಗಿದೆ JavaScript ಸಂದೇಶ ಕಳುಹಿಸುವಿಕೆ, ಇದು ಡ್ರಾಪ್ಡೌನ್ಗಳಿಂದ ಎಂಬೆಡೆಡ್ PDF ವೀಕ್ಷಕಕ್ಕೆ ಬಳಕೆದಾರರ ಆಯ್ಕೆಗಳನ್ನು ಕಳುಹಿಸುತ್ತದೆ. IFrame ಒಳಗೆ PDF ಗಳನ್ನು ನಿರೂಪಿಸಲು PSPDFKit ವೀಕ್ಷಕವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರ ವರ್ಷ ಮತ್ತು ತಿಂಗಳ ಆಯ್ಕೆಯ ಆಧಾರದ ಮೇಲೆ URL ಅನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ನಾವು ವೀಕ್ಷಕರನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುತ್ತೇವೆ. ಬಹು ಸ್ಥಿರ Wix ಪುಟಗಳನ್ನು ರಚಿಸದೆಯೇ ದೊಡ್ಡ ಆರ್ಕೈವ್ಗಳನ್ನು ಮೇಲ್ಮೈ ಮಾಡಲು ಇದು ಸುವ್ಯವಸ್ಥಿತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಮೊದಲ ಡ್ರಾಪ್ಡೌನ್ ವರ್ಷವನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಎರಡನೇ ಡ್ರಾಪ್ಡೌನ್ ತಿಂಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ. ಬಳಕೆದಾರರು ಎರಡನ್ನೂ ಆಯ್ಕೆ ಮಾಡಿದಾಗ, ಸಿಸ್ಟಮ್ ಅನುಗುಣವಾದ PDF ಫೈಲ್ಗೆ ಸೂಕ್ತವಾದ URL ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. ದಿ PSPDFKit.load() ವಿಧಾನವು ಇದಕ್ಕೆ ಕೇಂದ್ರವಾಗಿದೆ, ಏಕೆಂದರೆ ಇದು ನವೀಕರಿಸಿದ URL ಅನ್ನು ಆಧರಿಸಿ iFrame ಗೆ ಹೊಸ PDF ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಈ ವಿಧಾನವು PSPDFKit ಲೈಬ್ರರಿಯ ಭಾಗವಾಗಿದೆ, ಇದನ್ನು ಬಾಹ್ಯ ಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಪುಟದಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡಲಾಗಿದೆ. ದಿ ಪೋಸ್ಟ್ ಮೆಸೇಜ್() ಪರ್ಯಾಯ ಪರಿಹಾರದಲ್ಲಿ API ಸಹ ನಿರ್ಣಾಯಕವಾಗಿದೆ, ಇದು ಪೋಷಕ ಪುಟ ಮತ್ತು iframe ನಡುವೆ ಸಂದೇಶ ಕಳುಹಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. iframe ಗೆ ಹೊಸ PDF URL ಹೊಂದಿರುವ ಸಂದೇಶವನ್ನು ಕಳುಹಿಸುವ ಮೂಲಕ, PDF ವೀಕ್ಷಕವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸಲಾಗುತ್ತದೆ.
DOM ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಸ್ಕ್ರಿಪ್ಟ್ ರನ್ ಆಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನಾವು ಇದನ್ನು ಬಳಸುತ್ತೇವೆ DOMContentLoaded ಘಟನೆ ಡ್ರಾಪ್ಡೌನ್ ಅಂಶಗಳು ಮತ್ತು PSPDFKit ಕಂಟೇನರ್ ಸ್ಕ್ರಿಪ್ಟ್ಗೆ ಪ್ರವೇಶಿಸಬಹುದು ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ನಾವು ಪ್ರತಿ ಡ್ರಾಪ್ಡೌನ್ಗೆ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಸಹ ಸೇರಿಸುತ್ತೇವೆ. ಬಳಕೆದಾರರು ಒಂದು ವರ್ಷ ಅಥವಾ ತಿಂಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ, ಅನುಗುಣವಾದ ಈವೆಂಟ್ ಕೇಳುಗರು ಆಯ್ಕೆಯನ್ನು ಸೆರೆಹಿಡಿಯುತ್ತಾರೆ ಮತ್ತು ಸರಿಯಾದ URL ನೊಂದಿಗೆ PDF ವೀಕ್ಷಕವನ್ನು ಮರುಲೋಡ್ ಮಾಡಲು ಕಾರ್ಯವನ್ನು ಕರೆಯುತ್ತಾರೆ. ಡ್ರಾಪ್ಡೌನ್ಗಳಲ್ಲಿ ಆಯ್ಕೆಮಾಡಿದ ಮೌಲ್ಯಗಳಿಂದ URL ಅನ್ನು ನಿರ್ಮಿಸಲು ಟೆಂಪ್ಲೇಟ್ ಅಕ್ಷರಗಳನ್ನು ಬಳಸುವ ಸರಳ ಕಾರ್ಯದ ಮೂಲಕ ಇದನ್ನು ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ. ಈ ವಿಧಾನವು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸುಲಭವಲ್ಲ ಆದರೆ ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್ ಆಗಿದೆ, ಹೊಸ ಆರ್ಕೈವ್ಗಳನ್ನು ಸೇರಿಸುವುದರಿಂದ ಸುಲಭವಾದ ನವೀಕರಣಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
ಎರಡನೆಯ ವಿಧಾನದಲ್ಲಿ, ನಾವು ಬಳಸುತ್ತೇವೆ ಪೋಸ್ಟ್ ಮೆಸೇಜ್() ಮೂಲ ಪುಟ ಮತ್ತು iFrame ನಡುವೆ ಸಂವಹನ ನಡೆಸಲು. ಪೋಷಕ ಪುಟವು ಡ್ರಾಪ್ಡೌನ್ ಬದಲಾವಣೆಗಳನ್ನು ಆಲಿಸುತ್ತದೆ ಮತ್ತು ಹೊಸ PDF URL ಅನ್ನು ಹೊಂದಿರುವ ಸಂದೇಶವನ್ನು iFrame ಗೆ ಕಳುಹಿಸುತ್ತದೆ, ಇದು ಈವೆಂಟ್ ಆಲಿಸುವವರನ್ನು ಬಳಸಿಕೊಂಡು ಸಂದೇಶವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಐಫ್ರೇಮ್ ನೇರವಾಗಿ ಪೋಷಕ ಪುಟದ DOM ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಸಾಧ್ಯವಾಗದ ಹೆಚ್ಚು ಪ್ರತ್ಯೇಕ ಪರಿಸರಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಈ ವಿಧಾನವು ಉಪಯುಕ್ತವಾಗಿದೆ. ಎರಡೂ ವಿಧಾನಗಳು ಎಂಬೆಡೆಡ್ PDF ವೀಕ್ಷಕರ ವಿಷಯವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸಲು ಸಮರ್ಥ ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ, ಬಹು ಸ್ಥಿರ ಪುಟಗಳ ಅಗತ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಬ್ರೌಸಿಂಗ್ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.
Wix ನಲ್ಲಿ PDF ವೀಕ್ಷಕಕ್ಕಾಗಿ ಡ್ರಾಪ್ಡೌನ್-ಆಧಾರಿತ URL ಸ್ವಿಚಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು
JavaScript ಮತ್ತು Velo ಚೌಕಟ್ಟನ್ನು ಬಳಸಿಕೊಂಡು ಮುಂಭಾಗದ ಸ್ಕ್ರಿಪ್ಟ್
// HTML structure for the dropdowns and embed element
<div>
<label for="yearSelect">Select Year:</label>
<select id="yearSelect">
<option value="">--Year--</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<!-- Add other years dynamically or manually -->
</select>
<label for="monthSelect">Select Month:</label>
<select id="monthSelect">
<option value="">--Month--</option>
<option value="January">January</option>
<option value="February">February</option>
<!-- Add other months dynamically or manually -->
</select>
</div>
// Embedded PDF viewer in iframe
<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>
// JavaScript to update URL based on dropdown selection
<script>
document.addEventListener("DOMContentLoaded", () => {
const yearSelect = document.getElementById("yearSelect");
const monthSelect = document.getElementById("monthSelect");
function loadPDF(year, month) {
if (year && month) {
const url = `https://domain.tld/${year}_${month}_etc.pdf`;
PSPDFKit.load({
container: "#pspdfkit",
document: url,
}).catch((error) => {
console.error("Failed to load PDF:", error);
});
}
}
yearSelect.addEventListener("change", () => {
loadPDF(yearSelect.value, monthSelect.value);
});
monthSelect.addEventListener("change", () => {
loadPDF(yearSelect.value, monthSelect.value);
});
});
</script>
ಪರ್ಯಾಯ ವಿಧಾನ: iFrame ಸಂವಹನಕ್ಕಾಗಿ ಪೋಸ್ಟ್ಮೆಸೇಜ್ API ಅನ್ನು ಬಳಸುವುದು
iframe ಮತ್ತು ಪೋಷಕ ಡಾಕ್ಯುಮೆಂಟ್ ನಡುವೆ ಉತ್ತಮ ಪ್ರತ್ಯೇಕತೆಗಾಗಿ postMessage API ಅನ್ನು ಬಳಸಿಕೊಂಡು ಮುಂಭಾಗದ ಸ್ಕ್ರಿಪ್ಟ್
// HTML structure remains the same for dropdowns
// Here, we use iframe with a postMessage-based communication system
<iframe id="pdfViewer" src="about:blank" style="width: 100%; height: 100%;"></iframe>
// JavaScript for sending messages to iframe
<script>
document.addEventListener("DOMContentLoaded", () => {
const yearSelect = document.getElementById("yearSelect");
const monthSelect = document.getElementById("monthSelect");
const iframe = document.getElementById("pdfViewer");
function updatePDFViewer(year, month) {
if (year && month) {
const url = `https://domain.tld/${year}_${month}_etc.pdf`;
iframe.contentWindow.postMessage({
type: "updatePDF",
url: url
}, "*");
}
}
yearSelect.addEventListener("change", () => {
updatePDFViewer(yearSelect.value, monthSelect.value);
});
monthSelect.addEventListener("change", () => {
updatePDFViewer(yearSelect.value, monthSelect.value);
});
});
</script>
// Inside iframe, use this script to receive the message
<script>
window.addEventListener("message", (event) => {
if (event.data.type === "updatePDF" && event.data.url) {
PSPDFKit.load({
container: "#pspdfkit",
document: event.data.url,
});
}
});
</script>
Wix ಮತ್ತು JavaScript ಸಂದೇಶ ಕಳುಹಿಸುವಿಕೆಯೊಂದಿಗೆ PDF ಆರ್ಕೈವ್ ಪ್ರವೇಶವನ್ನು ಹೆಚ್ಚಿಸುವುದು
Wix ನಲ್ಲಿ ಎಂಬೆಡೆಡ್ PDF URL ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮಾರ್ಪಡಿಸಲು ಡ್ರಾಪ್ಡೌನ್ ಅಂಶಗಳನ್ನು ಬಳಸುವಾಗ ಮತ್ತೊಂದು ಪ್ರಮುಖ ಪರಿಗಣನೆಯು ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ iFrame ಮತ್ತು ಮುಖ್ಯ ಪುಟವು ಪರಿಣಾಮಕಾರಿಯಾಗಿರುತ್ತದೆ. JavaScript ಸಂದೇಶ ಕಳುಹಿಸುವಿಕೆಯು ಈ ಎರಡು ಘಟಕಗಳ ನಡುವೆ ಡೇಟಾವನ್ನು ಕಳುಹಿಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಆಯ್ಕೆಯು ನವೀಕರಣಗಳನ್ನು ಹೇಗೆ ಪ್ರಚೋದಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡುವ ಮೂಲಕ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಬಹುದು. ಇನ್ಪುಟ್ ಅನ್ನು ಡಿಬೌನ್ಸ್ ಮಾಡುವ ಮೂಲಕ ಇದನ್ನು ಮಾಡಬಹುದು, ಅಂದರೆ ಪ್ರತಿ ಬದಲಾವಣೆಯ ಬದಲಿಗೆ ಬಳಕೆದಾರರು ತಮ್ಮ ಆಯ್ಕೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ ಮಾತ್ರ ಸಿಸ್ಟಮ್ PDF ವೀಕ್ಷಕವನ್ನು ನವೀಕರಿಸುತ್ತದೆ.
ಇನ್ನೂ ಒಳಗೊಂಡಿರದ ಮತ್ತೊಂದು ಅಂಶವೆಂದರೆ ಅಡ್ಡ-ಮೂಲ ಸಂಪನ್ಮೂಲ ಹಂಚಿಕೆ (CORS). PDF ಗಳನ್ನು ಬಾಹ್ಯ ಸರ್ವರ್ನಲ್ಲಿ (ಡಿಜಿಟಲ್ ಓಷನ್ನಂತಹ) ಹೋಸ್ಟ್ ಮಾಡಲಾಗಿರುವುದರಿಂದ, Wix ಡೊಮೇನ್ನಿಂದ ಪ್ರವೇಶವನ್ನು ಅನುಮತಿಸಲು ಸರ್ವರ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಸರ್ವರ್ನ CORS ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಸರಿಯಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡದಿದ್ದರೆ, PDF ವೀಕ್ಷಕ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗದೇ ಇರಬಹುದು, ಇದು ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. PDF ಫೈಲ್ಗಳನ್ನು ಹೋಸ್ಟ್ ಮಾಡುವ ಸರ್ವರ್ನಲ್ಲಿ ಸರಿಯಾದ CORS ಹೆಡರ್ಗಳು ಎರಡು ಪ್ಲಾಟ್ಫಾರ್ಮ್ಗಳ ನಡುವೆ ತಡೆರಹಿತ ಏಕೀಕರಣಕ್ಕೆ ಅತ್ಯಗತ್ಯ.
ಹೆಚ್ಚುವರಿಯಾಗಿ, ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಪದೇ ಪದೇ ಪ್ರವೇಶಿಸಿದ PDF ಫೈಲ್ಗಳನ್ನು ಪೂರ್ವ ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ ನೀವು ಸಿಸ್ಟಮ್ ಅನ್ನು ವರ್ಧಿಸಬಹುದು. ಬಳಕೆದಾರರು ಬಹು ತಿಂಗಳುಗಳು ಅಥವಾ ವರ್ಷಗಳ ನಡುವೆ ಬದಲಾಯಿಸುವ ಸಾಧ್ಯತೆಯಿರುವಾಗ ಪೂರ್ವ ಲೋಡ್ ಮಾಡುವ ತಂತ್ರಗಳು ಉಪಯುಕ್ತವಾಗಿವೆ. ಈ ಫೈಲ್ಗಳನ್ನು ಬ್ರೌಸರ್ನ ಕ್ಯಾಷ್ನಲ್ಲಿ ಸಂಗ್ರಹಿಸುವ ಮೂಲಕ, ನಂತರದ ಡಾಕ್ಯುಮೆಂಟ್ ಲೋಡ್ಗಳು ವೇಗವಾಗಿದ್ದು, ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸೇವಾ ಕಾರ್ಯಕರ್ತರು ಅಥವಾ ಇತರ ಕ್ಯಾಶಿಂಗ್ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಮಾಡಬಹುದು, ಲಭ್ಯವಿರುವ ಆಯ್ಕೆಗಳ ಮೂಲಕ ಬಳಕೆದಾರರು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ PDF ಗಳನ್ನು ಪೂರ್ವ ಲೋಡ್ ಮಾಡಲು ಹೊಂದಿಸಬಹುದು.
Wix ನಲ್ಲಿ ಡೈನಾಮಿಕ್ PDF ಎಂಬೆಡ್ಗಳ ಬಗ್ಗೆ ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
- Wix ನಲ್ಲಿ ಡ್ರಾಪ್ಡೌನ್ ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ನಾನು ಹೇಗೆ ಸೇರಿಸುವುದು?
- ನೀವು Wix ಸಂಪಾದಕವನ್ನು ಬಳಸಿಕೊಂಡು ಡ್ರಾಪ್ಡೌನ್ ಅಂಶಗಳನ್ನು ಸೇರಿಸಬಹುದು ಮತ್ತು ಅನನ್ಯ ID ಗಳನ್ನು ನಿಯೋಜಿಸುವ ಮೂಲಕ ಅವುಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು JavaScript ಅನ್ನು ಬಳಸಬಹುದು. ಡ್ರಾಪ್ಡೌನ್ ಅಂಶಗಳು PDF URL ನಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ document.getElementById().
- ಏನು ಮಾಡುತ್ತದೆ PSPDFKit.load() ಆಜ್ಞೆ ಮಾಡು?
- ದಿ PSPDFKit.load() PDF ವೀಕ್ಷಕವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಮತ್ತು ನಿರ್ದಿಷ್ಟ PDF ಫೈಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ವಿಧಾನವು ಕಾರಣವಾಗಿದೆ. ಈ ವಿಧಾನವು PDF ಫೈಲ್ಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಪ್ರದರ್ಶಿಸಲು ಬಳಸುವ PSPDFKit ಲೈಬ್ರರಿಯ ಭಾಗವಾಗಿದೆ.
- ನಾನು ಬಳಸಬಹುದೇ postMessage() ಅಡ್ಡ-ಮೂಲ ಸಂವಹನಕ್ಕಾಗಿ?
- ಹೌದು, ದಿ postMessage() API ಅನ್ನು ನಿರ್ದಿಷ್ಟವಾಗಿ ವಿಭಿನ್ನ ಮೂಲಗಳ ನಡುವೆ ಸಂವಹನಕ್ಕಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ, ಉದಾಹರಣೆಗೆ ಮೂಲ ಪುಟ ಮತ್ತು iFrame ನಡುವೆ, ಇದು ಈ ಅನುಷ್ಠಾನಕ್ಕೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ.
- PDF ಅನ್ನು ಲೋಡ್ ಮಾಡುವಾಗ ನಾನು ದೋಷಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು?
- ಎ ಸೇರಿಸುವ ಮೂಲಕ ನೀವು ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸಬಹುದು .catch() ಗೆ ನಿರ್ಬಂಧಿಸಿ PSPDFKit.load() ಲೋಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಸಂಭವಿಸುವ ಯಾವುದೇ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು ಮತ್ತು ಸೂಕ್ತವಾದ ದೋಷ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಕಾರ್ಯ.
- ನಾನು CORS ಗಾಗಿ ನನ್ನ ಸರ್ವರ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕೇ?
- ಹೌದು, ನಿಮ್ಮ PDF ಗಳನ್ನು ಬೇರೆ ಡೊಮೇನ್ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಿದ್ದರೆ, ಸರ್ವರ್ ಅನ್ನು ಸರಿಯಾಗಿ ಹೊಂದಿಸಲಾಗಿದೆಯೇ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು CORS ದಾಖಲೆಗಳನ್ನು ಪ್ರವೇಶಿಸಲು Wix ಸೈಟ್ ಅನ್ನು ಅನುಮತಿಸಲು ಹೆಡರ್ಗಳು.
ಡೈನಾಮಿಕ್ PDF ಡಿಸ್ಪ್ಲೇಯಲ್ಲಿ ಅಂತಿಮ ಆಲೋಚನೆಗಳು
ಈ ಪರಿಹಾರವು ಒಂದೇ ಪುಟದಲ್ಲಿ PDF ಫೈಲ್ಗಳ ದೊಡ್ಡ ಆರ್ಕೈವ್ಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ವರ್ಷ ಮತ್ತು ತಿಂಗಳ ಆಯ್ಕೆಗಾಗಿ ಎರಡು ಡ್ರಾಪ್ಡೌನ್ ಅಂಶಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ, ನಾವು ಬಹು Wix ಪುಟಗಳನ್ನು ರಚಿಸದೆಯೇ PDF ವೀಕ್ಷಕವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸಬಹುದು.
ಡ್ರಾಪ್ಡೌನ್ಗಳು ಮತ್ತು iFrame ನಡುವಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಂದೇಶದೊಂದಿಗೆ Velo ಫ್ರೇಮ್ವರ್ಕ್ನ ನಮ್ಯತೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು, ಈ ವಿಧಾನವು ಐತಿಹಾಸಿಕ ಡೇಟಾವನ್ನು ಸಂಘಟಿಸಲು ಮತ್ತು ಪ್ರಸ್ತುತಪಡಿಸಲು ಸಮರ್ಥ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಲೈಬ್ರರಿ ಆರ್ಕೈವ್ಗಳಂತಹ ಸಾರ್ವಜನಿಕ-ಮುಖಿ ವೆಬ್ಸೈಟ್ಗಳಿಗೆ ಇದು ಸ್ಕೇಲೆಬಲ್ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿಯಾಗಿದೆ.
Wix ಮತ್ತು JavaScript ನೊಂದಿಗೆ ಡೈನಾಮಿಕ್ PDF ಲೋಡ್ ಮಾಡಲು ಮೂಲಗಳು ಮತ್ತು ಉಲ್ಲೇಖಗಳು
- HTML iFrame ಅಂಶ ಮತ್ತು Velo ಫ್ರೇಮ್ವರ್ಕ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು Wix ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಂದೇಶದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಕುರಿತು ವಿವರವಾದ ದಾಖಲಾತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಭೇಟಿ ನೀಡಿ Wix ಡೆವಲಪರ್ ಡಾಕ್ಸ್ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ.
- ಪಿಎಸ್ಪಿಡಿಎಫ್ಕಿಟ್ನ ಅಧಿಕೃತ ದಾಖಲಾತಿ, ತಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಐಫ್ರೇಮ್ನಲ್ಲಿ ಪಿಡಿಎಫ್ಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವುದು ಮತ್ತು ಲೋಡ್ ಮಾಡುವುದು ಹೇಗೆ ಎಂದು ವಿವರಿಸುತ್ತದೆ. ಅದನ್ನು ಇಲ್ಲಿ ಪ್ರವೇಶಿಸಿ: PSPDFKit ಡಾಕ್ಯುಮೆಂಟೇಶನ್ .
- ಡಿಜಿಟಲ್ ಓಷನ್ನಂತಹ ಬಾಹ್ಯ ಸರ್ವರ್ಗಳಿಂದ ಸರಿಯಾದ PDF ಲೋಡ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಕ್ರಾಸ್-ಆರಿಜಿನ್ ಸಂಪನ್ಮೂಲ ಹಂಚಿಕೆ (CORS) ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮಾರ್ಗದರ್ಶಿ. ನೀವು ಹೆಚ್ಚು ಓದಬಹುದು CORS ನಲ್ಲಿ MDN ವೆಬ್ ಡಾಕ್ಸ್ .