Gå til innhold

Hvordan kalle opp html-dokument i en DIV?

Kenny Bones

Anbefalte innlegg

Kenny Bones

Kenny Bones

Skrevet
Skrevet (endret)

Hei folks! Jeg skulle ha funnet ut en smart måte å få et script som legger inn innhold i en DIV fra et eksternt html-dokument. Jeg har lest en del på nettet og har så langt kun funnet dette:

 

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

 

Har nå fått til denne koden på mystisk vis. Men har en del feil. Se siste post.

 

Slik ser den komplette koden ut:

 

 

 

 

** HTML **

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Two Columns - Left Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
  <div id="maincontainerwrap"> <!-- Wrapper alt sammen START -->
  <a name="top"></a>

  <div id="Menu"> 																										<!-- DIV for venstremeny START -->
	<div class="leftmen_sec_a" id="leftmen_sec_a"><img src="Html/Img/site/leftmenu_02.gif" alt="leftmenu_02" />		</div>  

	   <div class="leftmen_content" id="leftmen_content">																<!-- Første seksjon (hjelp & støtte) -->	

<div id="dtree">

<script type="text/javascript">
ajaxpage('leftmen1.htm', 'dtree') //load "test.htm" into "rightcolumn" DIV
</script>
	   </div>		
	</div> 

  <div class="leftmen_sec_b" id="leftmen_sec_b"><img src="Html/Img/site/annet_top_01.gif" alt="annet_top_01" /></div>
	<div class="leftmen_content" id="leftmen_content_b">

		<div class="dtree2">				</div>			 
		</div>

		 <div class="leftmen_sec_end" id="leftmen_sec_end"><img src="Html/Img/site/leftmenubottom.gif" alt="leftmenubottom" /></div>
		   </div> 				
<!-- DIV for venstremeny END -->
			 <div id="Content"> <!-- Her begynner koden for innholdet på siden -->

   <p>Dette er innhold på siden<br />
   Dette er innhold på siden<br />
   Dette er innhold på siden<br />
   Dette er innhold på siden<br />
   Dette er innhold på siden<br />
   Dette er innhold på siden<br />
   Dette er innhold på siden<br />
   Dette er innhold på siden<br />
   Dette er innhold på siden<br />
   Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
   Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden<br />
Dette er innhold på siden</p>
   <p> </p>

   <a href="#top">Back to the top of the page</a>
 </div> 
 <!-- Her slutter koden for innholdet på siden -->

  <div class="Footer">
  <div class="Footer_left"></div>
	<div class="Footer_right"><img src="Html/Img/site/footer_right.gif" alt="footer_right" /></div>
  </div> 

</div> <!-- Wrapper alt sammen END -->

</body>
</html>

 

** CSS Style.css **

 

@charset "utf-8";
/* CSS Document 

*************************************************
** Kode som er gjeldende for hele siden [START]  **
**************************************************/
a
{
 outline: none;
}

p {
margin:0;
}

html,body {
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:#F3F6FA;
height:100%;
z-index:0;
margin:0;
padding:0;

}

.Showvideo,/* [SETTER FELLES STYLES PÅ FLERE] */
.Imagehead,.ImageLeft,.ImageCenter,.ImageRight,.contentImageRight {
background-color:#FFF;
border:1px solid silver;
}

.Footer,.Footer_left,.Footer_right {
height:100px;
bottom:0;
}

/*
*************************************************
** Kode som er gjeldende for hele siden [END]  **
*************************************************
*/

/*
*************************************************
** Kode for header [START]  **
*************************************************
*/

#nav {
position: absolute;
top: 101px;
left: 330px;
list-style: none;
margin: 0;
padding: 0;
height: 28px;
display: inline;
overflow: hidden;
width: 603px;
background: url(Html/Img/site/menu/navbar.gif)
}

#nav li {
position:relative;
float:left;
margin: 0; 
padding: 0;
display: inline;
overflow: hidden;
list-style-type: none;
}

#nav a {
float: left;
padding: 28px 0 0 0;
overflow: hidden;
height: 0px !important; height /**/:20px; /* for IE5/Win */
}

#nav a:hover {
background-position: 0 -28px;
}

#nav a:active, #nav a.selected {
background-position: 0 -56px;
}

#hjem a  {
width: 58px;
background: url(Html/Img/site/menu/hjem.gif) top left no-repeat;
}

#hjelp a  {
width: 107px;
background: url(Html/Img/site/menu/hjelp.gif) top left no-repeat;
}

#brukerveil a  {
width: 140px;
background: url(Html/Img/site/menu/brukerveil.gif) top left no-repeat;
}

#e-learn a  {
width: 126px;
background: url(Html/Img/site/menu/e-learn.gif) top left no-repeat;
}

#forum a  {
width: 65px;
background: url(Html/Img/site/menu/forum.gif) top left no-repeat;
}

#kontakt a  {
width: 96px;
background: url(Html/Img/site/menu/kontakt.gif) top left no-repeat;}	
.leftmenu_wrap {
float: left;
}

/*
*************************************************
** Kode som er gjeldende for hele siden [END]  **
*************************************************



*************************************************
** Kode for footer [START]  **
**************************************************
*/

.Footer {
position:absolute;
clear:both;
background-image:url(Html/Img/site/footer_middle.gif);
background-repeat:repeat-x;
width:100%;
text-align:center;
background-position:center;
z-index:inherit 1;
}

.Footer_left {
left:0;
float:left;
width:296px;
overflow:hidden;
position:relative;
background-image:url(Html/Img/site/footer_left.gif);
}

.Footer_right {
height:100px;
bottom:0;
right:0;
float:right;
width:296px;
overflow:visible;
position:static;
}

/*
*************************************************
** Kode for footer [END]  **
*************************************************


************************
** Hovedinnhold [START]   **
*************************/
#Content {
margin-top:0;
margin-right:10px;
margin-left:280px;
overflow:visible;
width:680px;
padding:10px 10px 110px;
}

#maincontainerwrap {
position:relative;
min-height:100%;
}

/* [INDIVIDUELLE STYLES] */
.QuoteRight,.QuoteLeft {
width:200px;
font-size:13pt;
letter-spacing:-1px;
border-bottom:1px solid silver;
border-top:1px solid silver;
color:#39F;
font-style:italic;
margin:0 0 15px 14px;
padding:5px 8px 7px;
}

.QuoteLeft {
float:left;
}

.QuoteRight {
float:right;
}

.Casewrap {
font-size:14px;
float:left;
margin-top:4px;
padding-top:4px;
padding-right:8px;
padding-left:8px;
margin-bottom:8px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
background-color:#E4EBF3;
border:1px solid #D3DEEB;
width:600px;
height:196px;
margin-left:1px;
}

/* [STYLES FOR BILDER] */
.ImageLeft,/* [SLÅR SAMMEN] */
.ImageCenter,/* [DISSE STILENE] */
.ImageRight {
line-height:0;
font-size:1px;
margin-top:0;
margin-bottom:0;
display:inline;
padding:2px;
}

.ImageLeft {
float:left;
margin:3px 15px 4px 0;
}

.ImageCenter {
text-align:center;
display:block;
position:absolute;
margin-left:20%;
}

.ImageRight {
float:right;
margin:4px 0 15px 15px;
}

.contentImageRight {
float:right;
margin-top:4px;
margin-bottom:4px;
margin-right:0;
padding:2px;
}

.Imagehead {
float:left;
margin:5px 50px 20px 31px;
padding:2px;
}

.Showvideo {
float:right;
margin:4px 0 15px 15px;
padding:1px;
}

/* [SKRIFTTYPER] */
.Hovedoverskrift {
font-size:13pt;
font-weight:700;
line-height:15pt;
letter-spacing:-1px;
color:#222;
}

.ImageText {
clear:both;
margin-top:2px;
border-top:1px solid #ddd;
font-size:8pt;
text-align:center;
line-height:normal;
width:auto;
padding:9px 3px 7px;
}

.Lenke {
font-size:9pt;
font-weight:400;
line-height:15pt;
color:#06F;
font-style:italic;
}

.caselinks {
font-size:14px;
color:#69F;
font-weight:700;
text-align:left;
text-decoration:none;
padding-left:5px;
}

.caselinks:hover {
text-decoration:underline;
color:#69F;
}

/*
************************
** Hovedinnhold [END]   **
************************


*****************************
** Venstremeny [START]	   **
******************************/
#Menu {
width:255px;
background: url(Html/Img/site/leftmenuspacer.gif);
repeat:repeat-y;
float:left;
top:0;
position:absolute;
left:0;
z-index:2;
overflow:visible;

}

body>#Menu {
width:255px;
}

.leftmenuwrap {
height:1%;
}

.leftmen_sec_bottom {
height:3px;
width:255px;
clear:both;
position:static;
}

.leftmen_sec_end {
height:21px;
width:255px;
clear:both;
position:static;
background-color:#F3F6FA;
}

.leftmen_content {
float:left;
width:184px;
margin-left:30px;
padding:10px 5px 5px;
}

.Leftmenutext_normal_link:hover {
text-decoration:underline;
}

.leftmen_sec_a,.leftmen_sec_b {
height:100%;
width:255px;
float:left;
}

.Leftmenutext_normal,.Leftmenutext_normal_link {
font-size:10pt;
font-family:Arial, Helvetica, Verdana, sans-serif;
text-align:left;
line-height:normal;
font-weight:400;
color:#467ddf;
font-style:normal;
text-decoration:none;
}

#leftmen_plusminus {
position:static;
left:73%;
width:37px;
height:15px;
z-index:1;
}
/*
*****************************
** Venstremeny [END]		 **
*****************************

 

**CSS dtree.css**

 

/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö		   |
|--------------------------------------------------*/

.dtree,
.dtree_alt,
.dtree2 {
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
color:#467ddf;
white-space: nowrap;
}

.dtree_alt {
font-weight: bold;

}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a,
.dtree2 {
color:#467ddf;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color:#467ddf;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

.test {
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
color:#467ddf;
white-space: nowrap;
}

** JavaScript ajax.js **

 

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

 

 

 

Beklager så mye for at dette ser så rotete ut! Prøvde å legge til hver kode i code-tags for å så putte disse igjen inn i spoiler-tags, men får bare feilmelding fra forumet eller at alt havner i samme spoilertagg..

Endret av Kenny Bones
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
eiden84

eiden84

Skrevet
Skrevet

AJAX på 1-2-3:

 

1. For å få AJAX til å fungere må du kjøre det fra en webserver. Det er dessverre ikke mulig å kjøre det lokalt.

 

2. Nettleserne har en sikkerhetsbegrensning som heter «Same origin policy». Det betyr kort fortalt at du kun kan hente innhold via AJAX fra samme domene.

 

Mer info finner du her:

http://en.wikipedia.org/wiki/Same_origin_policy

 

Det er mulig å komme seg rundt denne begrensningen på flere forskjellige måter.

 

3. Hvis du ikke skal lage AJAX-koden, gjør deg selv en stor tjeneste ved å benytte et skikkelig bibliotek. JQuery og Prototype anbefales!

 

Lykke til!

Lenke til kommentar
Kenny Bones

Kenny Bones

Skrevet
  • Forfatter
Skrevet

Hmm, hvorfor fungerer demoen lokalt da? Leste litt om at det kun er mulig å kjøre koden fra samme domene. Men trodde ikke at dette gjaldt når det blir kjørt lokalt.

Men du skriver at dersom jeg ikke skal lage AJAX-koden så kan jeg bruke et skikkelig bibliotek. Koden er jo der vel? Trengs noe mer enn det som allerede er der da? Ble litt forvirret nå må jeg si! :blush:

Lenke til kommentar
eiden84

eiden84

Skrevet
Skrevet
Hmm, hvorfor fungerer demoen lokalt da?

 

Den gjør jo ikke det. Det skriver du selv i den første posten din. Den fungerer i FF, men ikke i IE. Når du bruker AJAX, må sidene kjøres fra en webserver.

 

Men du skriver at dersom jeg ikke skal lage AJAX-koden så kan jeg bruke et skikkelig bibliotek. Koden er jo der vel?

 

Koden som du har ser ganske "hobby" ut. Jeg ville heller brukt et annet bibliotek som har mer solide AJAX-funksjoner, f.eks jQuery eller Prototype. Men den koden du allerede har virker helt sikkert.

 

Forsøk å sett opp en webserver på maskinen din. Da vil det virke.

Lenke til kommentar
Kenny Bones

Kenny Bones

Skrevet
  • Forfatter
Skrevet (endret)

Ok, har nå installert Abyss web server og har lagt over siden der. Når jeg prøver nå så får jeg følgende feilmelding:

 

Line: 41

Char: 1

Error: 'document.getElementById(...)'is null or not an object

Code: 0

URL: http://127.0.0.1/mainpage.htm

 

Skjønner ikke hva den ikke finner. "document.getElementById(containerid)." er jo spesifiser lenger oppe i koden som "function ajaxpage(url, containerid)" og i html-koden for mainpage.html står det

 

"<script type="text/javascript">

ajaxpage ('leftmen1.htm', 'dtree') //load "leftmen1.htm" into "dtree" DIV

</script>

"

 

Har også oppdatert script-koden i første post.

 

Edit: Prøvde meg også netopp på koden som står her:

http://www.dhtmlgoodies.com/index.html?whi...ial=ajax-basics

 

Men med nøyaktig samme resultat! Anyone?

 

Edit: Fikk det på en mystisk måte til. Men nå har selvfølgelig andre problemer oppstått!

Bare for å teste om det fungerte eller ikke tok jeg å endret bakgrunnsfargen til dokumentet som blir hentet opp så jeg kan se om det funker eller ikke. Også skrev jeg noe blablabla-tekst som test. Så ser jeg at ja, blablabla står der, men ikke tremenyen. Altså den som skal være der! Når jeg viser selve dokumentet som har menyen i seg i IE eller Firefox så er alt greit. Men ikke via DIVen. Og for det andre, dette er skikkelig rart, i Firefox så har bakgrunnsfargen sneket seg utover hele siden! Men bare i viewport. Se bare her:

 

Slik ser html-dokumentet ut alene (dette er korrekt)

greenir2.jpg

 

Slik ser det ut i Internet Explorer når det blir kalt opp i DIVen. Forholdsvis korrekt, men menyen skal likevel være der

ierightwj4.jpg

 

Og slik ser det ut i Firefox!

ffgreenaf9.jpg

Legg merke til at jeg har på bildet scrollet bittelitt nedover så dere kan se hvordan det ser ut nedenfor viewport. Der er alt som det skal være. Oppdaterer også all kode i førstepost.

Endret av Kenny Bones
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...