是否可以加载为 src= .. 放在前一个 href= 上的链接？

Question

我在我的网站的各种表格中列出了许多链接，这些链接在 iframe 中以弹出窗口的形式打开，效果很好，但如果我只放一次链接而不是放一次，会更容易需要在 iframe 上重复，链接写如下：

<td>
<a href="LINK1.html" target="_blank"><img class="imageg" src="img/timon2.png"></a>
        <div class="boxht cint">
          <iframe src="LINK1.html" width = "100%" height = "100%" frameBorder="0" ></iframe>
        </div>
</td>
...
<td>
<a href="LINK2.html" target="_blank"><img class="imageg" src="img/timon2.png"></a>
        <div class="boxht cint">
          <iframe src="LINK2.html" width = "100%" height = "100%" frameBorder="0" ></iframe>
        </div>
</td>

这是当鼠标经过旋转方向舵时弹出的带有 iframe 的原始页面： http://emmind.net/endogenous_fields_&_mind.html.
下一行是引用 iframe 及其效果的代码部分（如果有帮助的话）：

旋转方向舵：

.imageg {
    position: static;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    margin: -0px 0 0 -0px;
    -webkit-animation: spin 8.5s linear infinite;
    -moz-animation: spin 8.5s linear infinite;
    animation: spin 8.5s linear infinite;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

包含iframe的div：

.boxht {
    display: none;
    width: 35%;
    position: fixed;
    z-index: 100;
    top: 16%;
    left: 63%;
    height: 65%;
    padding-bottom: 0px;
    border: 2px solid #dfdfdf;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #ffffbb;
}
a:hover + .boxht {
    display: inline;
}
.boxht:hover {
    display: inline;
}

石头与框架重叠的效果：

.cint:before,
.cint:after {
    content: "";
    display: block;
    position: absolute;
}
.cint:before {
    bottom: -40px;
    left: -30px;
    height: 79px;
    width: 85px;
    background-image: url(img/piedra2c.png);
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    transform: rotate(-50deg);
}
.cint:after {
    top: -42px;
    right: -20px;
    width: 93px;
    height: 80px;
    background-image: url(img/piedra1.png);
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
    transform: rotate(-12deg);
}

Answer 1

使用 jQuery 可以快速完成（尽管它不是很复杂，是否应该实际使用它来完成这项任务是有争议的）。 通过<script src>标签在你的标题中嵌入一个jQuery版本，你可以使用这个sn-p。
作为参考，您可以查找API docs of jQuery。

// Perform `function` when the page loads
$(function() {
  // Select all `img` tags with class `imageg` that are children of an `a`
  $('a > img.imageg').each(function(i) {
    // Wrap the parent (`a`) into jQuery
    var $href = $(this.parentNode);
    // Generate a new div > iframe and insert it after `a`
    $('<div class="boxht cint"><iframe src="' + $href.attr('href') + '" width="100%" height="100%" frameborder="0"></iframe></div>').insertAfter($href);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="LINK1.html" target="_blank">
        <img class="imageg" src="img/timon2.png">
      </a>
    </td>
    <td>
      <a href="LINK2.html" target="_blank">
        <img class="imageg" src="img/timon2.png">
      </a>
    </td>
  </tr>
</table>