Προς το περιεχόμενο
  • Εγγραφή
  • 0

Πρόβλημα με την εκτέλεση συνάρτησης στο <body onload=""> όταν φορτώνεται σε div άλλησς σελίδας


doctorized

Ερώτηση

Έχω μία σελίδα η οποία έχει 2 div. Στο πρώτο φορτώνεται ένα μενού (navbar) και στο δεύτερο φορτώνονται κάποιες σελίδες δικής μου κατασκευής. Σε μία από τις σελίδες χρειάζεται να τρέξω μία συνάρτηση με το που φορτώνεται καθώς έχω κάποια div μέσα τα οποία θέλω να μην εμφανίζονται εξ αρχής αλλά να εμφανίζονται με βάση τις επιλογές του χρήστη. Έτσι λοιπόν λέω: <body onload="init()"> με την init() να περιέχει τον κώδικα που θέλω. Όταν τρέχω σε περιηγητή τη σελίδα μόνης της όλα είναι οκ. Όταν όμως τη φορτώσω στο div της αρχικής σελίδας, τότε η init() δεν τρέχει με αποτέλεσμα όλα τα div να είναι φάτσα φόρα. Επίσης, μετά το <body onload="init()"> λέω: <center> , κάτι που ούτε αυτό λαμβάλεται υπόψιν καθώς όλα εμφανίζονται αριστερά. Τι μπορώ να κάνω;

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

9 απαντήσεις σε αυτή την ερώτηση

Προτεινόμενες αναρτήσεις

  • 0

Εννοείς ότι μέσα στο δεύτερο div έχεις διάφορα iframe; Αν ναι μήπως σε βοηθάει κάτι τέτοιο <iframe id="iframe" src="resultFrame.html" onload="init();">

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
6 ώρες πριν, elpenor είπε

Εννοείς ότι μέσα στο δεύτερο div έχεις διάφορα iframe; Αν ναι μήπως σε βοηθάει κάτι τέτοιο <iframe id="iframe" src="resultFrame.html" onload="init();">

Μέσα στο Div φορτώνεται σελίδα που περιέχει Div, όχι iframe. 

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Δεν μπορώ να καταλάβω τι εννοείς "φορτώνεται σελίδα", το body tag δεν μπορεί να μπει μέσα σε div και αν το βάλεις ο browser θα το αγνοήσει σαν να μην υπάρχει. Aν θέλεις να έχεις content που να μην φαίνεται αν δεν πατήσει ο χρήστης κάποιο κουμπί τότε μπορείς να κάνεις το div display:none και μόλις ο browser ανιχνεύσει ένα click event στο κουμπί να το κάνεις display:block.

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Πως φορτώνεται με φορτωτή; 

Για να φορτώσεις μια σελίδα σε άλλη πρέπει να το κάνεις με iframe. 

Ή έχεις ένα ένα template και αντικάθιστάς κομμάτια, όχι όμως σελίδες ολόκληρες tags head ή body.

Η τελική σου σελίδα πρέπει να έχει ένα head και ένα body. Δεν μπορείς μέσα σε ένα body να βάλεις δεύτερο tag body

6 λεπτά πριν, elpenor είπε

Δεν μπορώ να καταλάβω τι εννοείς "φορτώνεται σελίδα", το body tag δεν μπορεί να μπει μέσα σε div και αν το βάλεις ο browser θα το αγνοήσει σαν να μην υπάρχει. Aν θέλεις να έχεις content που να μην φαίνεται αν δεν πατήσει ο χρήστης κάποιο κουμπί τότε μπορείς να κάνεις το div display:none και μόλις ο browser ανιχνεύσει ένα click event στο κουμπί να το κάνεις display:block.

είσαι πιο γρήγορος🤙

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
Δημοσ. (επεξεργασμένο)

Να ένα παράδειγμα. Το index.html έχει τον κωδικα:

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
</head>
<body>
    <div id="navbar">
    <button onclick="loadurl('page2.html');">click me</button>
    </div>
<div id="mydata"></div>

<script>     
function loadurl(url) {
  var xhttp;
  if (window.XMLHttpRequest) {
    // code for modern browsers
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("mydata").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}


$(window).resize(function(){
var height = 20;  //take the header height
$('.content').css({'margin-top':height});  //alter the margin of the wrapped content
}).trigger('resize');  //trigger the margin resize when page is loaded
</script>
</body>
</html>

Ενώ το page2.html εχει:

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
<script type="text/javascript">
function init(){
	var gel_s = document.getElementById("1");
	gel_s.style.display = "none";
	var epal = document.getElementById("2");
	epal.style.display = "none";
	var gel_l = document.getElementById("3");
	gel_l.style.display = "none";
	var div_r = document.getElementById("4");
	div_r.style.display = "none";
}
</script>
</head>
<body onload="init()">

<center>
<p>some text.</p>
<div id="1">
<p>This is first div.</p>
</div>
<div id="2">
<p>This is second div.</p>
</div>

<div id="3">
<p>this is third div.</p>
</div>

<div id="4">
<p>this is fourth div.</p>
</div>

</center>
</body>
</html>

Λέτε να διώξω το body στην page2; τι άλλο να κάνω για να κληθεί η init; 

 

Επεξ/σία από doctorized
Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
Δημοσ. (επεξεργασμένο)

Δεν μας έχεις δώσει κάποιο παράδειγμα για το πως επιλέγεις τα div που θα εμφανιστούν. Ο κώδικας που γράφεις ποιο πάνω λογικά κάνει το ίδιο με αυτόν. Το παράδειγμα σου πέρα από το ότι δεν είναι σωστό θα είχε σαν αποτέλεσμα να φανούν πρώτα τα div και μετά να εξαφανιστούν αφού γίνει load όλη η σελίδα, καλύτερα να τα κρύψεις εξ αρχής και μετά να εμφανίσεις αυτό που θέλεις.
 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    #id1, #id2, #id3, #id4 {
      display: none;
    }
  </style>
</head>
<body>
  <div id="navbar">
    <button onclick="loadurl('page2.html');">click me</button>
  </div>
  <div id="mydata"></div>

  <script>     
    function loadurl(url) {
      var xhttp;
      if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest ();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("mydata").innerHTML = this.responseText;
            Εδώ θα έγραφα εγώ τον κώδικα που θα εμφανίζει τα div που θέλω με βάση τις επιλογές του χρήστη.
          }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
      }
    }
  </script>
</body>
</html>

-->page2.html<--

<center>
  <p>some text.</p>
  <div id="id1">
    <p>This is first div.</p>
  </div>
  <div id="id2">
    <p>This is second div.</p>
  </div>

  <div id="id3">
    <p>this is third div.</p>
  </div>

  <div id="id4">
    <p>this is fourth div.</p>
  </div>
</center>

 

Επεξ/σία από elpenor
Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
Δημοσ. (επεξεργασμένο)

Τα div επιλέγονται με κλικ σε κάποια buttons τα οποία στο onclick καλούν functions όπως:

function ShowHide($element) {
	if ($element === "1"){
		var x = document.getElementById("div_1_sections");
		x.style.display = "block";
		var y = document.getElementById("div_2_sections");
		y.style.display = "none";
		var div_r = document.getElementById("div_results");
		div_r.style.display = "none";
		document.getElementById("gl").style.backgroundColor = "#A9A9A9";
		document.getElementById("epl").style.backgroundColor = "#00b57f";
	}else if ($element === "2"){
		var x = document.getElementById("div_1_sections");
		x.style.display = "none";
		var y = document.getElementById("div_2_sections");
		y.style.display = "block";
		document.getElementById("gl").style.backgroundColor = "#00b57f";
		document.getElementById("epl").style.backgroundColor = "#A9A9A9";
		var gel_f = document.getElementById("div_3");
		gel_f.style.display = "none";
		var div_r = document.getElementById("div_results");
		div_r.style.display = "none";
		document.getElementById("id1").style.backgroundColor = "#00b57f";
		document.getElementById("id2").style.backgroundColor = "#00b57f";
		document.getElementById("id3").style.backgroundColor = "#00b57f";
	}
} 

Δεν μπορώ να πειράξω την loadurl() όπως προτείνεις γιατί φορτώνει καμιά 20ριά σελίδες που δεν περιέχουν τέτοια div. Τα gl, elp, id1, id2 και id3 είναι buttons που γίνονται γκρι για να δείξουν ποιο πάτησε ο χρήστης και εμφανίστηκε το div που θέλω από κάτω.

Επεξ/σία από doctorized
Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
Δημοσ. (επεξεργασμένο)

Mία λύση είναι να βάλεις την init () σε εξωτερικό αρχείο να το κάνεις link και στις δύο σελίδες σου και να την καλείς. Η βάλε την init και στο index παρακάτω κώδικας για το index σου σε εμένα δουλεύει

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
</head>
<body>
    <div id="navbar">
    <button onclick="loadurl('page2.html');">click me</button>
    </div>
<div id="mydata"></div>

<script>  
function init()//η init εδώ
{
	var gel_s = document.getElementById("1");
	gel_s.style.display = "none";
	var epal = document.getElementById("2");
	epal.style.display = "none";
	var gel_l = document.getElementById("3");
	gel_l.style.display = "none";
	var div_r = document.getElementById("4");
	div_r.style.display = "none";
}  
function loadurl(url) {
  var xhttp;
  if (window.XMLHttpRequest) {
    // code for modern browsers
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("mydata").innerHTML = this.responseText;
      init(); //την καλώ εδώ
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}


$(window).resize(function(){
var height = 20;  //take the header height
$('.content').css({'margin-top':height});  //alter the margin of the wrapped content
}).trigger('resize');  //trigger the margin resize when page is loaded
</script>
</body>
</html>

Τσέκαρε και τον πηγαίο κώδικα στο index για να ξέρεις τι φορτώνει

Επεξ/σία από k33theod
  • Like 1
Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Εγγραφείτε για έναν νέο λογαριασμό

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...

Με την περιήγησή σας στο insomnia.gr, αποδέχεστε τη χρήση cookies που ενισχύουν σημαντικά την εμπειρία χρήσης.