v2.5.2
Giriş yap

Frame/iFrame etkileşimi

avla123
106 defa görüntülendi
1

Merhaba, index.html, sol_menu.html, sag_icerik.html adında 3 dosyam var.

index sayfasında frame olarak sol menu ve sağ içerik sayfalarını çalıştırıyorum.

istediğim olay ise basit bir şekilde soldaki menüde 1. kategoriye basınca sağ taraftaki içerik alanında 1 numaralı html dosyasını açmasını istiyorum, 2. kategoriye basınca 2 numaralı html dosyasını göstermesini istiyorum. frame kullanmamın nedeni bu sayfaları açarken sol tarafta bulunan bölümün gitmesini istemiyorum. çok basit bir şekilde örnek ile yardımcı olabilir misiniz?

html php javascript
Cevap yaz
Cevaplar (1)
gokcin
100 gün önce
  1. index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menü Örneği</title>
</head>
<body>

    <!-- Sol Menü -->
    <div id="solMenu">
        <ul>
            <li><a href="#" onclick="loadContent('sol_menu.html')">Kategori 1</a></li>
            <li><a href="#" onclick="loadContent('sag_icerik.html')">Kategori 2</a></li>
            <!-- Diğer kategorileri buraya ekleyebilirsiniz -->
        </ul>
    </div>

    <!-- Sağ İçerik Alanı -->
    <div id="sagIcerik">
        <!-- İlk açılışta görüntülenecek içerik -->
        <iframe src="sol_menu.html" width="100%" height="500px" frameborder="0"></iframe>
    </div>

    <script>
        function loadContent(htmlDosya) {
            // Sağ içerik alanına iframe üzerinden HTML dosyasını yükle
            document.getElementById("sagIcerik").innerHTML = `<iframe src="${htmlDosya}" width="100%" height="500px" frameborder="0"></iframe>`;
        }
    </script>

</body>
</html>

Bu örnek, sol menüdeki her kategoriye tıklandığında loadContent fonksiyonunu çağırarak sağ içerik alanındaki iframe'e ilgili HTML dosyasını yükler. Uygulamayı daha da genişletmek için kategori sayısını artırabilir ve dosya adlarını güncelleyebilirsiniz.

0
#013178