Question

我想通过点击地图在不同的目标框架中打开两个网址。下面是我的页面所需的图像。与地图部分（1-9）链接的页面是不同的。我有18个外部链接，用于9个地图部分（1-9）。所以，我想点击1 .... 9地图部分打开不同的页面。注1,2,3 ---未对齐并表示地图坐标（strees / cities等）。

点击map-part（1）....它应该模拟打开两页 1右框架，例如google，youtube等。 2-bottom frame，例如google，youtube等。

代码应该适用于PC以及移动设备。这是我的试用代码...... 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>

我想打开例如右框架中的http://www.w3schools.com链接和另一个链接，例如谷歌，在底部框架：

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>]

我知道可以通过使用脚本来实现，但我怎样才能在我的代码中执行此操作？

Answer 1

这是你的开始

请注意，出于安全原因，某些网站不会在iframe中投放

使用图片地图根据评论进行更新，点击行星加载iframe

＆＃13;

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;
  })
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

下面的代码有效。您必须删除样式并改为使用样式表。

<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>

在目标框架中同时打开两个网站

2 个答案: