Öffnen Sie zwei Websites gleichzeitig in Zielrahmen

Ich möchte zwei URLs in verschiedenen Zielrahmen öffnen, indem Sie auf eine Karte klicken. Unten ist ein Bild von meiner Seite erforderlich. Die mit den Kartenteilen (1-9) verknüpften Seiten sind unterschiedlich. Ich habe 18 externe Links für 9 Kartenteile (1-9). Also, ich möchte auf 1 .... 9 Kartenteile klicken, um verschiedene Seiten zu öffnen. Anmerkung 1,2,3 --- sind nicht ausgerichtet und stellen Koordinaten der Karte dar (Strees/Städte usw.).Öffnen Sie zwei Websites gleichzeitig in Zielrahmen

Mit einem Klick auf dem Karte-Teil (1) .... es zwei Seiten Simultane 1-rechte Rahmen geöffnet werden soll, zum Beispiel Google, YouTube etc. 2-Bodenrahmen, zum Beispiel Google, YouTube, etc.

Der Code sollte auch für PC als auch mobil arbeiten. Hier ist mein Versuch Code ... main.html

<html> 

<frameset rows="50%,50%"> 
<frameset cols="50%,50%"> 
<frame src="inside.html" name="left"> 
<frame <p>Locked in a frame? <a href="http://www.w3schools.com/html/" target="_top">Click here!</a></p> name="right"> 
<frame src="bottom.htm" name="bottom" > 

</frameset> 
</frameset> 

</html>

ich öffnen wollen, zum Beispiel http://www.w3schools.com Link im rechten Frame, und eine andere Verbindung, z.B. im unteren Rahmen zu Google:

inside.html

[![<html> 
    <head> 
    <title>CSS </title> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <style type="text/css" media="screen"> 
body { 
    height: 100%; 
} 
* { 
    box-sizing: border-box; 
} 
.image-wrap { 
    width: 750px; 
    height: 500px; 
    padding:2px; 
     background:url('pic.jpg'); 
} 
.image-wrap a#S000 { 
     display:block; 
     text-indent:-10000px; 
     height:500px; 
     width:500px; 
     position:absolute; 
     left:5px; 
     top:50px; 
    } 

    </style> 
    </head> 
    <body> 
    <div class="image-wrap"> <p><big>overview</big></p> 
     <a id="S000" href="http://www.w3schools.com"target="_blank">S000</a>  
    </div> 
    </body> 
</html>]

Ich weiß man es mithilfe eines Skripts tun, aber wie kann ich es in meinem Code zu tun?

Quelle

2016-07-02 Shahgee

'frameset' /' frame' wird in HTML5 nicht mehr unterstützt und Sie können kein 'p'-Tag innerhalb eines' frame'-Tags einfügen ... und ich verstehe die Frage – LGSon

@LGSon nur schwer siehe editierte Frage zum besseren Verständnis ... – Shahgee

Hier ist ein Anfang für Sie

beachten Sie, dass einige Websites iframes aus Sicherheitsgründen

aktualisiert basierend auf Kommentar mit einer Image-Map Klicken Sie stattdessen nicht in läuft auf den Planeten die iframes

var ais = document.querySelectorAll('.images area'); 
 
for (var i = 0; i < ais.length; i++) { 
 
    ais[i].addEventListener('click', function(e) { 
 
    document.querySelector('iframe[name="right"]').src = e.target.dataset.nr1; 
 
    document.querySelector('iframe[name="bottom"]').src = e.target.dataset.nr2; 
 
    }) 
 
}

html, body { 
 
    margin: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.row { 
 
    display: flex; 
 
    height: 50vh; 
 
} 
 
.left { 
 
    width: 40vw; 
 
} 
 
iframe[name="right"] { 
 
    width: 60vw; 
 
    height: 50vh; 
 
    box-sizing: border-box; 
 
} 
 
iframe[name="bottom"] { 
 
    height: 50vh; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="left"> 
 
     <span><b>Overview</b></span> 
 
     <div class="images"> 
 
     <img src="http://i.stack.imgur.com/HpWre.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 
 
     <map name="planetmap"> 
 
      <area shape="rect" coords="0,0,82,126" alt="" href="#" 
 
      data-nr1="http://www.w3schools.com" 
 
      data-nr2="http://www.apple.com"> 
 
      <area shape="circle" coords="90,58,3" alt="" href="#" 
 
      data-nr1="http://www.w3schools.com" 
 
      data-nr2="http://www.apple.com"> 
 
      <area shape="circle" coords="124,58,8" alt="" href="#" 
 
      data-nr1="http://www.w3schools.com" 
 
      data-nr2="http://www.apple.com"> 
 
     </map> 
 
     </div> 
 
    </div> 
 
    <iframe name="right" src=""></iframe> 
 
    </div> 
 
    <iframe name="bottom" src=""></iframe> 
 
</div>

laden

Quelle

2016-07-03 08:43:56 LGSon

demütigen Dank für Ihre Hilfe (+1). Aber relativ neu zu sein, kann dir nicht folgen. Ich habe kein Rasterbild. Ich habe Länderkarte. Klicken Sie auf die Koordinaten der Karte (Städte usw.), um eine andere Website zu öffnen. Wie kann ich den unteren Teil strecken, um den ganzen Bildschirm zu füllen (50% der Gesamthöhe). - – Shahgee

du bist großartig ... lassen Sie mich überprüfen ... einige Websites werden nicht in iFrames aus Sicherheitsgründen laufen .... du meinst nicht Browser? Also, ich kann in allen Browsern öffnen ... – Shahgee

@Shahgee: Nein, ich meine 'iframe's, einige Website-Besitzer wollen nicht, dass ihre Website in einem' iframe' auf der Website eines anderen Benutzers läuft, daher sie kann es davon abhalten – LGSon

Unten Code funktioniert. Sie müssen die Stile entfernen und stattdessen ein Stylesheet verwenden.

<iframe name="left_side" src="http//www.google.com" width="50%" 
     height="50%" frameBorder="0"></iframe> 
<iframe name="right_side" src="http//www.google.com" width="50%" 
     height="50%" frameBorder="0"></iframe>

Quelle

2016-07-02 22:19:19

@uddin siehe editierte Frage zum besseren Verständnis ... – Shahgee

Öffnen Sie zwei Websites gleichzeitig in Zielrahmen

Antwort

Verwandte Themen