script/kod för "dynamic content without reload"

Mr.Notepad · 2012-06-24, 14:06

Jag tänkte berätta lite hur det går och om jag är helt fel ute när det gäller nuvarande lösning...

Det som verkar vara enklaste lösningen som varken kräver ajax eller jquery är "innerHTML".
Man slipper massor av separata html-sidor (som annars krävs vid iframelösningar) och man slipper köra en "IF-sats med request" och ladda om hela sidan varje gång man klickar på en länk och låter en variabel avgöra vad som ska visas i "ytan". (Som annars var/är min nödlösning på hela problement)

Följande kod fungerar strålande, men med ett undantag:

HTML-kod:

<html>
<head>

<script type="text/javascript">
function changecontent01(){
	var newContent = "kod för väderwidget";
	document.getElementById('contentarea').innerHTML = newContent;
}
function changecontent02(){
	var newContent = "<img src='http://www.wn.se/images/misc/wn_logo3.gif'>";
	document.getElementById('contentarea').innerHTML = newContent;
}
function changecontent03(){
	var newContent = "<iframe width='560' height='315' src='http://www.youtube.com/embed/gWnPqgl8X9w' frameborder='0'></iframe>";
	document.getElementById('contentarea').innerHTML = newContent;
}
function changecontent04(){
	var newContent = "Här visas helt vanlig text<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Praesent aliquam, justo convallis luctus rutrum, erat nulla<br> fermentum diam, at nonummy quam ante ac quam.";
	document.getElementById('contentarea').innerHTML = newContent;
}
</script>

</head>
<body>

<table border="1" width="900" height="600">
	<tr>
	<td width="100" valign="top">
<a href="javascript:changecontent01();">Väder</a><br>
<a href="javascript:changecontent02();">Bild</a><br>
<a href="javascript:changecontent03();">Youtube-film</a><br>
<a href="javascript:changecontent04();">Text</a>
	</td>
	<td width="800" align="center" valign="top"><p id='contentarea'>&nbsp;</p>
	</td>
	</tr>
	</table>

</body>
</html>

...detta fungerar som sagt, men om jag vill lägga in kod för en väderwidget så innehåller den koden ett script i sig:

Kod:

<div id='c_adf7d3ec1031d188dc6867336771dcbd' class='alto'><h2 style='color: #000000; margin: 0 0 3px; padding: 2px; font: bold 13px/1.2 Verdana; text-align: center;'>Väder Malmö</h2></div><script type='text/javascript' src='http://www.klart.se/widget/widget_loader/adf7d3ec1031d188dc6867336771dcbd'></script>

...så om jag lägger in ovanstående under "function changecontent01" så kraschar allt eftersom det blir "script inuti ett script".

Med hjälp av min fungerande kod ovan är det enkelt att se vad jag vill göra när jag säger "att öppna länkar i en yta utan att reloada eller ha massor av sidor". Prova gärna.
Med ovanstående lösning behövs bara en enda sida för en sajt som i normala fall skulle kunna ha 20-30 olika sidor.
Allt som återstår nu är hur vissa innehåll ska formateras för att kunna köras.
Några förslag eller synpunkter?

Ämnesverktyg
Visa utskriftsvänlig version E-posta den här sidan
Visningsalternativ
Växla till linjär visning Växla till hybrid-visning Trådad visning

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

script/kod för "dynamic content without reload"