We have written the following JavaScript code to allow students to preview PDF files uploaded to our forum. Our goal is to enable them to view lecture notes directly on the forum while preventing them from downloading the files.
However, since the PDFs are embedded within an iframe, we haven't been able to completely block the "Save As" option. Even though previewing works fine, students can still download the PDF files, especially on mobile devices where the "Save to Files" option appears.
We need a solution that ensures PDFs can be previewed but not downloaded on both desktop and mobile devices. How can we achieve this?
$(document).ready(function () {
function processPDFs() {
console.log("PDF önizleme işleniyor...");
$('a[href$=".pdf"]').each(function () {
let link = $(this).attr('href');
if (!$(this).next('.pdf-container').length) {
if (isMobileDevice()) {
// 📱 **Mobil cihazlarda sadece PDF linkini göster, önizleme yok**
$(this).show();
} else {
// 💻 **Masaüstünde PDF'yi önizle**
$(this).hide(); // PDF linkini gizle
let container = $('<div class="pdf-container" style="width:100%; max-width:900px; height:700px; position: relative; margin-top:10px; border: 1px solid #ccc; overflow: hidden;"></div>');
let pdfObject = $('<object style="width:100%; height:100%;" type="application/pdf" sandbox="allow-scripts allow-same-origin" oncontextmenu="return false;"></object>');
let fullscreenBtn = $('<button class="fullscreen-toggle" style="position:absolute; top:10px; right:10px; background:#000; color:#fff; border:none; padding:5px 10px; cursor:pointer; z-index:10;">🔍 Tam Ekran</button>');
pdfObject.attr('data', link + "#toolbar=0");
fullscreenBtn.on('click', function () {
toggleFullscreen(container[0]);
});
container.append(pdfObject).append(fullscreenBtn);
$(this).after(container);
}
}
});
$('.file a').each(function () {
let fileLink = $(this).attr('href');
if (fileLink.endsWith('.pdf') && !$(this).next('.pdf-container').length) {
if (isMobileDevice()) {
// 📱 **Mobilde sadece PDF linki göster**
$(this).show();
} else {
// 💻 **Masaüstünde PDF'yi önizle**
$(this).hide();
let container = $('<div class="pdf-container" style="width:100%; max-width:900px; height:700px; position: relative; margin-top:10px; border: 1px solid #ccc; overflow: hidden;"></div>');
let pdfObject = $('<object style="width:100%; height:100%;" type="application/pdf" sandbox="allow-scripts allow-same-origin" oncontextmenu="return false;"></object>');
let fullscreenBtn = $('<button class="fullscreen-toggle" style="position:absolute; top:10px; right:10px; background:#000; color:#fff; border:none; padding:5px 10px; cursor:pointer; z-index:10;">🔍 Tam Ekran</button>');
pdfObject.attr('data', fileLink + "#toolbar=0");
fullscreenBtn.on('click', function () {
toggleFullscreen(container[0]);
});
container.append(pdfObject).append(fullscreenBtn);
$(this).after(container);
}
}
});
}
// 📌 **Mobil Cihaz Algılama**
function isMobileDevice() {
return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
}
// 📌 Tam Ekran Aç/Kapat Fonksiyonu
function toggleFullscreen(element) {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
// 📌 ESC ile Tam Ekrandan Çıkınca Butonu Güncelle
$(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange msfullscreenchange", function () {
$(".fullscreen-toggle").text(document.fullscreenElement ? "↩ Tam Ekrandan Çık" : "🔍 Tam Ekran");
});
// İlk yükleme
processPDFs();
// Sayfa değişimlerinde tekrar çalıştır (NodeBB SPA yapısına uygun)
$(window).on('action:ajaxify.end', function () {
processPDFs();
});
console.log("PDF izleme sistemi güncellendi: Mobilde sadece link gösteriliyor, masaüstünde önizleme aktif.");
});
blog!
