Question

我有一个主页index.html和另一个projects_imgs.html的网页，它将是index.html

中的iframe src

在projects_imgs.html内会有图片。我想做的是，

在index.html我想添加链接到<a>内图片的projects_imgs.html代码，因此每当用户点击这些链接时，iframe都会加载定位特定图片的点击链接< / p>

明白了吗？

到目前为止，这是index.html的代码：

＆＃13;

    <!-- Projects section -->
    <div class="section projects-section" id="section4">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-9">
          <iframe class="pull-right" width="85%" height="700px" src="projects_imgs.html" name="projects_gallery"></iframe>
        </div>
        </div>
        <p><a href="projects_imgs.html" target="projects_gallery">Images</a></p>
      </div>
    </div>

＆＃13;

和projects_imgs.html：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>MH-Shukri Projects Gallery</title>
<!--- Bootstrap CSS --->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--- Bootstrap Theme --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
</head>
<body>
<style>
body {
  background-color: #34312C;
}

img {
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>

  <div class="row">
    <div class="col-lg-12">
      <img class="img-responsive" src="imgs/projects/Faf/1.jpg"/>
      <img class="img-responsive" src="imgs/projects/Faf/2.jpg"/>
      <img class="img-responsive" src="imgs/projects/Faf/3.jpg"/>
      <img class="img-responsive" src="imgs/projects/Faf/4.jpg"/>
      <img class="img-responsive" src="imgs/projects/Faf/5.jpg"/>
      <img class="img-responsive" src="imgs/projects/Faf/6.jpg"/>
    </div>
  </div>



</body>
</html>

＆＃13;

Answer 1

我认为在html中实现这样的逻辑是不可能的。我建议你用PHP来实现这个逻辑。这是一个小例子：

的index.html

<html>
    <body>
        Images: <br>
        <a href="images.html?image=1"> Image 1 </a> <br>
        <a href="images.html?image=2"> Image 2 </a>
    </body>
</html>

这些链接使用参数＆＃34; image＆＃34;调用images.html。正如您所看到的，我们设置了＃34; image＆＃34;到1或2，取决于用户点击的内容。

images.html

<html>
<body>
    <?php
        if($_GET["image"] == 1)
        {
            echo "<img src='Image1'/>";
        }
        if($_GET["image"] == 2)
        {
            echo "<img src='Image2'/>";
        }           
    ?>
</body>
</html>

在images.html中，您决定使用IF语句。如果它是1，那么你只需用图像调用1.如果2 ....

您可以使用它来实现iFrame。但请记住，您需要一个了解PHP才能使其运行的网络服务器！

度过美好的一天！

Answer 2

我真的想通了！

我这样做：

＆＃13;

function setURL(url){
    document.getElementById('iframe').src = url;
}

＆＃13;

<iframe id="iframe" src="index.html" width="50%" height="250px"></iframe> <br>
<a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/1.jpg')">A01-FAF-1</a><br>
<a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/2.jpg')">A01-FAF-2</a><br>
<a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/3.jpg')">A01-FAF-3</a><br>
<a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/4.jpg')">A01-FAF-4</a><br>
<a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/5.jpg')">A01-FAF-5</a><br>
<a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/6.jpg')">A01-FAF-6</a><br>

＆＃13;

只需用一些随机的谷歌图片链接替换图像即可进行测试。

如何在iframe中定位<img/>？

2 个答案: