• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] PDF und Dokument - Viewer

Sooo, ich habe mir nochmal deinen Testlink angeschaut. Du solltest deinen Code mal ordentlich formatieren. Auch glaube ich daas du bei deinen Conditional Comments für den IE noch einen Fehler drinnen hast.
Als erstes würde ich die ganzen relativen Pfade ausmisten und mich absolut zu deiner Subdomain orientieren.
Bei der folgenden Ausführung ist das Thema erst einmal auf die Einbindung der Colorbox und der LeaveNotice behandelt.
Hierzu der Code für die Datei tester3.html:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
	<title>Testseite</title>
	<!-- META -->
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
	<meta name="description" content="Colorbox LeaveNotice" />
	<meta name="viewport" content="width=device-width" />
	<!-- Stylesheet -->
	<link href="/Main-Theme/css/colorbox.css" rel="stylesheet" />
	<!-- JavaScript -->
	<script src="/Main-Theme/js/jquery-1.8.3.min.js"></script>
	<script src="/Main-Theme/js/jquery.colorbox.js"></script>
	<script src="/Main-Theme/js/test1.js"></script>
	<script>
	$(document).ready(function () {
		'use strict';
		//Examples of how to assign the Colorbox event to elements
		$('.ajax').colorbox({
			scrolling: false,
			width: '80%',
			height: '80%'
		});
		$('.iframe').colorbox({
			iframe: true,
			scrolling: false,
			width: '95%',
			height: '80%'
		});
		$('.ajaxLeaveNotice').colorbox({
			scrolling: false,
			width: '80%',
			height: '80%',
			onComplete: function () {
				modifyExternalLinks($('#cboxLoadedContent'));
			}
		});
	});
	</script>
</head>

<body>
	<ol>
		<li><a class="ajax internal-link" href="tester1.html" title="normale Ajaxbox">AjaxBox Test (standard ajax)</a></li>
		<li><a class="iframe internal-link" href="tester1.html" title="normale Ajaxbox">AjaxBox Test (standard iframe)</a></li>
		<li><a class="ajaxLeaveNotice internal-link" href="tester1.phtml" title="normale Ajaxbox">AjaxBox Test (ajax mit LeaveNotice-callback)</a></li>
	</ol>
</body>
</html>

Statt deiner jquery.main.js binde ich eine reduzierte test1.js mit folgendem Inhalt ein:
Code: 
/* External Links */
// All links that are external to our domain will launch the external link disclaimer
function modifyExternalLinks(jqLinkContainer) {
	'use strict';
	var jqExtLinks,
		jqExtClassLinks,
		registerLeaveNotice = null;

	registerLeaveNotice = function () {
		jqExtClassLinks.leaveNotice({
			timeOut: 0,
			siteName: 'LeaveNotice 2nd test page'
		});
	};

	if (jqLinkContainer && jqLinkContainer.length > 0) {
		jqExtLinks = $('a', jqLinkContainer).filter(function () {
			return this.hostname && this.hostname !== location.hostname;
		});
		jqExtClassLinks = $('a.external-link', jqLinkContainer);
		jqExtLinks
			.attr('rel', 'external')
			.each(function () {
				this.title = (this.title.length === 0) ? '(external link)' : this.title + ' (external link)';
			})
			.not('a.external-link')
			.click(function (e) {
				var url = $(this).attr('href'),
					extmsg = 'Sie verlassen jetzt unsere offizielle, öffentlichen Website. ' +
						'Bitte beachten Sie, dass diese Drittanbieter-Website nicht von uns kontrolliert oder ' +
						'von unsere Datenschutzrichtlinie betroffen ist!\n' +
						'Wir sind nicht für den Inhalt dieser Drittanbieter-Website verantwortlich und ' +
						'können diesen nicht beeinflussen.\n\n' +
						'Klicken Sie [OK] um zu ' + url + ' zu gelangen.';

				e.preventDefault();
				if (confirm(extmsg)) {
					location.href = url;
				}
			});

		if (jqExtClassLinks.length > 0) {
			if ($('link[href^="/Main-Theme/css/jquery.leaveNotice.css"]').length < 1) {
				$('head').append('<link href="/Main-Theme/css/jquery.leaveNotice.css?' + $.now() + '" rel="stylesheet" \/>');
			}
			if ($.isFunction($.fn.leaveNotice)) {
				registerLeaveNotice();
			} else {
				$.getScript('/Main-Theme/js/jquery.leaveNotice.min.js', registerLeaveNotice);
			}
		}
	}
}

function addMoreLinks() {
	'use strict';
	var html = [
		'	<div id="cboxLoadedContent" style="border: 2px solid blue;">',
		'		<ol>',
		'			<li><a href="http://www.google.de" title="Mit Titel-Attribut">Extren Test</a><br></li>',
		'			<li><a href="http://forum.jswelt.de/index.html">Intern Test</a><br></li>',
		'			<li><a class="external-link" href="http://www.google.de">Extern Class Test</a></li>',
		'		</ol>',
		'		<input type="button" id="cboxLoadedContentButtonRemove" value="Remove this links..." />',
		'	</div>'
	].join('');

	$('#cboxLoadedContentButton').hide();
	$('body').append(html);
	$('#cboxLoadedContentButtonRemove').on('click', function () {
		$(this).off('click');
		$('#cboxLoadedContent').remove();
		$('#cboxLoadedContentButton').show();
	});
	modifyExternalLinks($('#cboxLoadedContent'));
}

// page init
jQuery(function ($) {
	'use strict';
	modifyExternalLinks($('body'));
	$('#cboxLoadedContentButton').on('click', addMoreLinks);
});
Der Unterschied besteht darin, das die Registrierung der externen Links nun in einer Funktion ausserhalb des document.ready()-Blocks ist und mit einem Parameter aus diesem aufgerufen wird. Die Funktion addMoreLinks() dient nur zum nachträglichen Hinzufügen und Entfernen weiterer Links an das Ende des aktuellen Dokuments inkl. deren Registrierung mittels der Funktion modifyExternalLinks(). Dies wird für die einzubindende Datei tester1.html benötigt:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
	<title>Testseite</title>
	<!-- META -->
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
	<!-- Stylesheet -->
	<link href="/Main-Theme/css/colorbox.css" rel="stylesheet" />
	<!-- JavaScript -->
	<script type="text/javascript" src="/Main-Theme/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="/Main-Theme/js/test1.js"></script>
</head>

<body>
	<ol>
		<li><a href="http://www.google.de">Extern Test</a><br></li>
		<li><a href="http://forum.jswelt.de/index.html">Intern Test</a><br></li>
		<li><a class="external-link" href="http://www.google.de" title="Mit Titel-Attribut">Extern Class Test</a></li>
	</ol>
	<input type="button" id="cboxLoadedContentButton" value="Add more links..." />
</body>
</html>

AjaxBox Test (standard ajax):
Hier wird über die Standardeinstellung der Colorbox die Datei tester1.html in das aktuelle Dokument geladen. Es scheint fast alles zu funktionieren, aber es gibt Probleme:
- Die LeaveNotice wird zwar ausgeführt, ist jedoch wegen der Colorbox nicht sichtbar. Das liegt an dem CSS-Definition z-index der Colorbox. Daher benötigt die LeaveNotice-CSS-Definition folgende Anpassungen:
Code: 
/* The style for the blackout div that appears when the exit dialog is shown. */
#ln-blackout {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; z-index:19999;}

/* This style is for a container that holds the message dialog box. It has been added primarily to help with positioning. I know some people would complain about this, but it seems more efficient this way even it is isn't semanitc. */
#ln-messageHolder {position:fixed; top:150px; left:0; width:100%; z-index:19999;}
- Sämtliches JavaScript, welches in der aktuellen Seite (tester3.html) vorhanden ist, wird durch die Scripte der nachgeladenen Datei (tester1.html) überschrieben. Dies kann fatal sein, wenn z.B. das nachzuladende Dokument eine inkompatible jQuery-Version oder der gleichen enthält.
- Über den Button [Add more link...] werden die neuen Links nicht unter den vorhandenen Links in der Colorbox eingefügt, sondern nicht sichtbar (wegen dem Colorbox-Overlay) an das Ende der aktuellen Seite, was sichtbar wird, wenn die Colorbox wieder geschlossen wurde.

AjaxBox Test (standard iframe):
Hier wird die Datei tester1.html auch über die Colorbox geladen, jedoch wird der geladene Inhalt nicht einfach in die aktuelle Seitenstruktur eingefügt, sondern es wird vorher ein iframe erstellt und die geladene Seite wird so gekapselt in diesem dargestellt. Der erste Eindruk: Es sieht schon mal besser aus.
- Die Links werden correct registriert und es erscheint entsprechend die Confirmation-Box oder die LeaveNotice-Box
- Über den Button [Add more link...] werden die neuen Links auch korrekt unter die vorhandenen eingefügt
Aber auch hier gibt es Probleme:
- Wenn wirklich zu einem externen Link weitergeleitet werden soll, funktioniert das wegen dem iframe nicht so wie gewünscht, da nicht die Adresszeile des Browsers geändert wird, sondern die des iframes. Auch kann es Probleme mit dem cross-origin-framing geben, sodass der Browser einfach die aufzurufende Seite blockiert.

AjaxBox Test (ajax mit LeaveNotice-callback):
Hier wird über die Standardeinstellung der Colorbox die Datei tester1.phtml in das aktuelle Dokument geladen. Der Unterschied ist, das nur reines HTML nachgeladen wird:
HTML: 
<ol>
	<li><a href="http://www.google.de">Extern Test</a><br></li>
	<li><a href="http://forum.jswelt.de/index.html">Intern Test</a><br></li>
	<li><a class="external-link" href="http://www.google.de" title="Mit Titel-Attribut">Extern Class Test</a></li>
</ol>
Die Registrierung der Links erfolgt dnn über den Aufruf in der onComplete-Methode der Colorbox und soweit ich das verstanden habe, ist dies auch so von dem Author der Colorbox vorgesehen bzw. gedacht. Denn zusätzliche <script>-Blöcke in der nachzuladenden Datei zu notieren gestaltet sich problematisch, da diese dann sofort nach dem Laden ausgeführt werden, der dazu passende HTML-Code aber erst später in die aktuelle Seitenstruktur eingefügt wird. Daher auch die verschiedenen Callbacks der Colorbox, wie der genannte onComplete.

Du musst dir also mal Gedanken machen was du, und vor allem mit welcher Funktionalität, in der Colorbox darstellen möchtest.
Dann können wir evtl. mal weiter Diskutieren und Fehlerbehebung betreiben oder Vorschläge geben.

Denke mal das erklärt auch schonmal etwas deine Verständnisfrage zu dem PDFJS, warum es als ajax nicht so funktioniert, aber als iframe schon.
 
Wooho. Da hast du dir aber sehr viel Mühe gemacht, miniA4kuser.

Colorbox wird aber nicht zusammen mit LeaveNotice ausgeführt, da innerhalb von Colorbox bei mir keine wirklichen externen Links geladen werden.
Für wirklich externe Links, wird einfach über Target ein neues Fenster geöffnet.

Die Colorbox soll im wesentlichen nur zur Anzeige der Dokumente in den jeweiligen Viewern (es kommt noch ein Ebook-Viewer (bin noch nicht sicher ob Monocle oder Ebook.js)) hinzu).

---------------

Wozu ich an dieser Stelle den Knopf zum hinzufügen der Links brauchen soll, ist mir aber beim überfliegen, aber noch nicht ganz klar geworden.
Warum kann ich im Dokument nicht einfach so erweitern:

Code: 
<ol>
	<li><a href="http://www.google.de">Extern Test</a><br></li>
	<li><a href="http://forum.jswelt.de/index.html">Intern Test</a><br></li>
	<li><a class="external-link" href="http://www.google.de" title="Mit Titel-Attribut">Extern Class Test</a></li>
        [B]<li><a class="external-link" href="neuerLink" title="Mit Titel-Attribut">Neuer Link</a></li>[/B]
</ol>

aber muss das ganze wohl mal live testen, so rein vom Text her, ist mir das im Moment zugegeben, etwas zu hoch ( ;) )
Außerdem müsste ich deine test1.js ja eh noch erweitern, da die originale jquery.main.js ja noch weitere Funktionen beinhaltet, die in anderen Dokumenten benötigt werden.
 
Zuletzt bearbeitet:
Der Knopf zum Hinzufügen der Links war jetzt nur zum Testen gedacht. Den brauchst du natürlich nicht. Das war jetzt nur zum simulieren, wenn neue Links wie auch immer hinzukommen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben