如何在iframe中定位<img>？

我有一個網頁是主要index.html和另一projects_imgs.html這將是index.html如何在iframe中定位<img>？

裏面的IFRAME SRC的projects_imgs.html裏面會有圖像。我想要做的是，

在index.html我想補充<a>標籤鏈接到圖片裏面projects_imgs.html，所以每當用戶點擊這些鏈接的iframe裝載的是針對特定圖像被點擊鏈接

GET這個想法？

到目前爲止，這裏的index.html代碼：

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

和projects_imgs.html：

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

來源

2017-01-16 Abdulrahman Mushref

那麼別無他法？除PHP之外 –

爲了實現這種只有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>

這些鏈接調用images.html與參數「圖像」。正如你所看到的，我們將「圖像」設置爲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>

在您使用IF語句決定images.html。如果它是1，那麼你只需調用圖像1.如果2 ....

你可以用它來實現它與你的iFrame。但請記住，您需要一個瞭解PHP的Web服務器才能使其運行！

祝您有美好的一天！

來源

2017-01-16 12:48:46

我其實已經想通了！

我不喜歡這樣寫道：

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

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

只是一些隨機谷歌圖片鏈接來測試它替換圖像。

來源

2017-01-16 14:35:55

如何在iframe中定位<img>？

回答

相關問題