html - 如何在 iframe 中定位 <img>？-6ren

html - 如何在 iframe 中定位？

转载作者：行者123 更新时间：2023-11-28 04:32:12

26

4

我有一个主要的网页index.html和另一个 projects_imgs.html这将是 index.html 中的 iframe src

在projects_imgs.html里面会有图像。我想做的是，

在index.html我想添加 <a>链接到内部图像的标签 projects_imgs.html ，因此每当用户单击这些链接时，iframe 都会加载针对特定图像的已单击链接

明白了吗？

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

最佳答案

我认为仅在 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>

这些链接使用参数“image”调用 images.html。如您所见，我们将“图像”设置为 1 或 2，具体取决于用户点击的内容。

图片.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 的网络服务器才能运行它!

祝你有美好的一天!

关于html - 如何在 iframe 中定位 <img>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41676275/

26

4

0

文章推荐： c++ - 默认模板参数在偏特化上下文中的作用

文章推荐： javascript - ng-class 在一个 ng-class 指令中具有条件和函数

文章推荐： html - 如何在不使用最大宽度的情况下垂直对齐标签？

文章推荐： c++ - 使用基于数组和范围的 For 循环替换一些基本代码行

iframe - iframe 页面可以告诉它们何时被 iframe 吗？
所以我知道，如果我将 iFrame 包含到不在同一域中的页面，我将无法通过浏览器策略访问该 iframe 的 DOM，但是 iframe 中的页面可以执行任何类型的父文档访问吗？具体来说，我必须考虑
iframe - 从其他 iframe 字符串中获取 iframe 元素
我有 3 个嵌套的 iframe，我想访问第三个 iframe 中的元素(链接)。 var iframe = document.getElementById('aswift_2'); var inne
iframe - 将浏览器开发人员工具控制台上下文切换到特定的 iframe
Chrome 有最简单的方法，只需从下拉列表中选择一个框架即可。 Firefox 提供了 cd(frame)功能不太好用，但只要您愿意发现哪个框架是哪个框架就可以完成工作。但是我们如何在 Inter
iframe - 在不同域中的不安全页面上保护 iframe
我们公司正在考虑允许第三方网站使用我们的在线结账系统。一位客户表示，他们希望能够使用灯箱样式的弹出窗口来显示结帐。他们希望在网站的每个页面上都可以使用它，因此大多是不安全的页面。我们的结帐系统和客户
iframe - iframe 中从子级到父级的跨域访问
当 iframe 中加载的页面来自另一个域时，我们如何从 iframe 中加载的文档访问父文档？我收到权限被拒绝错误。最佳答案如果您可以控制这两个文档，那么您可以轻松地使用 easyXDM (
iframe - Iframe 中的重定向问题
使用 SOAP 调用我得到一个 URL 并在 iframe 中显示。那个 URL 内容是一个表单，用户需要填写所有数据并提交它。当我调用 SOAP 函数时，也给出了一个返回链接，其中一个重定向到我的站
iframe - 模仿来自另一个域的 iframe
我正在尝试开发一个小型 Web 应用程序，其中包含一个使用来自另一个域的 iframe 的 Web 应用程序。我正在尝试在本地计算机上对此进行测试，为此我需要模仿 iframe 来自另一个域(虽然它实
iframe - 异步加载 iframe
我有一个网页指向另一个网站。我不希望这阻止页面其余部分的加载。有没有办法异步加载它？最佳答案使用 jQuery，可以实现以下效果: $(window).load(function() {
iframe - iframe API似乎仅适用于较早的虚荣网址
我搜索过高低，无法找到解决方案。在我看来，iframe API仅适用于较旧样式的网址，而不适用于较新的海关网址。我的意思是，如果某人的YouTube网址为www.youtube.com/user/T
iframe - 通过我的服务器代理YouTube iframe
我想在我的网站上显示youtube视频。 iframe是可能的，我只需要像这样将其放在我的网页上。一切都很好，除了我超过99％的客户来自伊朗，而且YouTube在伊朗被政府封锁。因此，直接从you
iframe - 为什么人们仍然使用 iframe？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
iframe - 谷歌分析和 iFrame
所以我有一个简单的页面，当用户单击链接时，iframe 将打开。我正在尝试使用 http://www.google.com/support/analytics/bin/answer.py?hl=en&
iframe - 网络爬虫和 IFrame
假设情况:我有一个名为“miniatureBoltsInCarburetors.com”的不起眼的小网站，该网站提供有关将化油器固定在一起的微型 bolt 的内容以及一些一般相关的汽车信息。我的网站还
iframe - 此页面包含安全和不安全的项目以及 iframe
IE 6.0 向我显示消息“此页面包含安全和非安全项目”，因为我的页面上有 iframe(针对组合框错误)。我尝试指向 src 中的一些不同的内容，但如果不放入空白的 html 页面，我似乎无法摆脱此
iframe - 防止在回发时重新加载 iframe
我有一个带有一个 iframe 和一个按钮的网页。在页面加载事件中， if (!Page.IsPostBack) { string sDocUrl = //some doucmen url Ifra
javascript - 如何从页面中临时删除 iframe，然后在不重新下载 iframe 内容的情况下重新添加 iframe？
我有一个带有一些 IFrame 的页面。这些 IFrame 位于同一域中。我想在打开模态窗口时从页面中删除 iframe 内容，以减少模态窗口中的延迟。然后，当我关闭模态窗口时，我希望将 IFram
testing - Protractor iframe inside iframe inside iframe
我正在尝试访问一个框架内的控件，该框架位于另一个框架内的框架内。最后(最深的)框架仅用于登录 - 我设法做到了。问题是登录后我基本上需要回到上框点击一个按钮。出于某种原因，我不断收到错误消息: N
javascript - 访问父 iframe 元素的容器(iframe inside iframe)
我有下一个元素结构: .. actual markup with scripts here 使用纯 javascript，我已经摆脱
iframe - 突破具有多个限制的 iframe
我们使用 Worldpay 作为我们的支付提供商，我们将 PayPal 作为 worldpay 的一部分实现，这意味着我们只与 Worldpay 集成，他们处理 PayPal 集成。虽然这会带来很多
iframe - 嵌套在非安全页面上的安全 IFRAME
我有一个客户，由于特定原因，需要在 HTTP 页面上放置一个指向 HTTPS 页面的 IFRAME。 HTTP 页面托管在与 HTTPS 页面不同的域和服务器上，但都属于同一客户端。撇开为什么不应该

首页

博学

6Ren·AI

商城