Dynamischer Content in iFrame

[FB55]

Hi,

ich will auf meiner Seite einen Feed importieren und bei diesem es ermöglichen, von Anker zu Anker zu springen. Da allerdings die Anker nicht in der Address-Leiste angezeigt werden sollten, kam mir die Idee, das mit einem iFrame mit dynamischem Content per JS zu machen. Als Anregung diente dieser Post.

Hier mein Code:

function feedLoad(url, name){
	var frame = document.createElement("iframe");
	frame.frameBorder = "0";
	frame.height = "100%";
	frame.width = "100%";
	frame.onload = function(){iFeedFetch(this,url);}
	addTab(name, frame);
}

function iFeedFetch (iframe, url){

	var frame = iFrameReady (iframe);

	var feed = doAtomQuery(url);

	var div = frame.document.createElement("div");
	div.style.width = "50px";
	div.style.height = "50px";
	div.style.border = "none";
	div.innerHTML = feed;

	try{frame.document.body.appendChild(div);}
	catch(e){alert('kein appendchild');}

}


function iFrameReady (iframe){
	iframe.document = null;
	if(iframe.contentDocument){iframe.document = iframe.contentDocument;}
	else if(iframe.contentWindow){iframe.document = iframe.contentWindow.document;}
	else if(iframe.document){iframe.document = iframe.document;}

	if(iframe.document == null){alert("Kann auf iFrame nicht zugreifen!");}

	iframe.document.open();
	iframe.document.close();
	
	return iframe;
}

var icon_share = 'http://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_switch.png';
var icon_mail = 'http://upload.wikimedia.org/wikipedia/commons/a/a8/Email_link.png';
var icon_send2 = 'http://upload.wikimedia.org/wikipedia/commons/4/4a/Arrow_right.png';
var icon_preview = 'http://upload.wikimedia.org/wikipedia/commons/3/31/WikEd_preview.png';

function doAtomQuery(url){
	var atomStore = new dojox.data.AtomReadStore({
		url: url
	});
	function printResults(items){
	var title = atomStore.getFeedValue("title");
	var subtitle = atomStore.getFeedValue("subtitle");
	var buffer = ["<div id='feedtab'><a>"+title.text+"</a> - <a>"+subtitle.text+"</a> - Zeige "+items.length+" Posts"];
	var itemnum = "0"
	dojo.forEach(items, function(item){

	var title = atomStore.getValue(item, "title");
	var content = atomStore.getValue(item, "content");
	var link = atomStore.getValue(item, "alternate");
	var author = atomStore.getValue(item, "author");
	var categories = atomStore.getValues(item, "category");

	if(author.name&&author.uri){var autor="<i> by <a href='"+author.uri+"'>" + author.name +"</a></i>";}
	else{if(author.name){var autor="<i> by " + author.name +"</i>";}
	else{var autor="";}}

	buffer.push("<div id='feed"+itemnum+"' class='feed' onclick='feedClick(this.id);'><div id='heading'><a href='" + link.href 
			+ "' target='_new' style='font-size:16pt; font-weight:bold; color:#800000;'>"
			+ title.text + "</a>"+autor);
	buffer.push("</div><div class='post'><br/>"+content.text);
	if (categories) {
		var buffer2 = [];
		dojo.forEach(categories, function(category){
		buffer2.push(category.term)
		});
		buffer.push("Kategorien: " + buffer2.join(" | "));
	}

	buffer.push("</div><div id='bar'><br/>"
	+"<a href='javascript:;'><img src="+icon_share+" height='15px' width='15px'/>Share this</a> "
	+"<a href='javascript:;'><img src="+icon_mail+" height='15px' width='15px'/>E-Mail</a> "
	+"<a href='javascript:;'><img src="+icon_send2+" height='15px' width='15px'/>Send2</a> "
	+"<a href='javascript:;' onclick='preview(this)'><img src="+icon_preview+" height='15px' width='15px'/>Preview</a></div></div>"
	);
	
	itemnum++;
	});
	buffer.push("</div>");
	return buffer.join("<br/>");
};
	atomStore.fetch({
	query: {},
	count: 50,
	onComplete: printResults
	});
}

Das Resultat: die Seite wird weiß und nix passiert.

Ich verwende Dojo, um Feeds zu laden...

Hat jemand eine Idee, was falsch sein könnte?

 

[Sven Mintel]

Moin,

erstmal eingangs, um Missverständnisse gleich im Vorraus auszuräumen:
Du schreibst, du "importierst" den Feed...von woher? Selbe Domain wie das Dokument?

 

[FB55]

Ja, momentan schon. Später will ich ne MySQL-Datenbank dahinter stellen - und die Geschwindigkeit optimieren bis ins Gehtnichtmehr.

 

[Sven Mintel]

Der 1.Haken ist jenes:

frame.onLoad = iFeedFetch(this, url);

Das ist keine Funktionszuweisung an den onload-Event des iFrames, sondern eine Zuweisung des Rückgabewertes von iFeedFetch(this, url) an den onLoad-Event.

Soll heissen:
Diese Funktion wird sofort ausgeführt, nicht erst, wenn der Event feuert.

Wenn sie erst beim onload ausgeführt werden soll, muss es so aussehen:

frame.onload = function(){iFeedFetch(this,url);}

 

[FB55]

Update: ich kann auf das Dokument nicht zugreifen. Was mache ich falsch? Code oben update ich...

 

[Sven Mintel]

Dies hier würde ich ale erstes mal überdenken:

    iframe.document = null;
    if(iframe.contentDocument){iframe.document = iframe.contentDocument;}
    else if(iframe.contentWindow){iframe.document = iframe.contentWindow.document;}
    else if(iframe.document){iframe.document = iframe.document;}

    if(iframe.document == null){alert("Kann auf iFrame nicht zugreifen!");}

Die blau markierte Zeile macht keinen Sinn, denn wenn der Browser die beiden Zeilen davor übergeht, ist ja iframe.document null(somit nicht true)...du hast den Wert in der 1. Zeile selbst gesetzt

In der von dir verlinkten Seite steht das anders.