如何为建立不同html文档的iframe的src属性的锚点设置onclick事件的两个版本

为建立不同 HTML 文档的 iframe 的 src 属性的锚点设置 onclick 事件的两个版本，有以下两种方式：

版本一：

<script>
  function setIframeSrc(anchorId) {
    var iframe = document.getElementById("myIframe");
    var anchor = document.getElementById(anchorId);
    var anchorHref = anchor.getAttribute("href");
    iframe.src = anchorHref;
  }
</script>

<a href="page1.html" onclick="setIframeSrc('anchor1')">Link 1</a>
<a href="page2.html" onclick="setIframeSrc('anchor2')">Link 2</a>

<iframe id="myIframe" src="" frameborder="0"></iframe>

版本二：

<script>
  function setIframeSrc(anchorId) {
    var iframe = document.getElementById("myIframe");
    var anchor = document.getElementById(anchorId);
    var anchorHref = anchor.getAttribute("href");
    iframe.src = anchorHref;
  }

  window.onload = function() {
    var anchors = document.querySelectorAll("a[data-iframe-src]");
    for (var i = 0; i < anchors.length; i++) {
      var anchor = anchors[i];
      anchor.addEventListener("click", function(e) {
        e.preventDefault();
        setIframeSrc(this.getAttribute("data-iframe-src"));
      });
    }
  };
</script>

<a href="#" data-iframe-src="page1.html">Link 1</a>
<a href="#" data-iframe-src="page2.html">Link 2</a>

<iframe id="myIframe" src="" frameborder="0"></iframe>

以上两种版本均实现了为建立不同 HTML 文档的 iframe 的 src 属性的锚点设置 onclick 事件。在版本一中，使用了 inline JavaScript，在点击链接时直接调用 setIframeSrc() 函数，传递对应的锚点 ID，该函数通过获取锚点的 href 属性值，并将其赋值给 iframe 的 src 属性来实现页面切换。

在版本二中，使用了更加优雅的方式。在每个链接中增加了 data-iframe-src 属性，用于存储对应的锚点 ID。在页面加载完毕时，使用 window.onload 事件和 querySelectorAll 方法获取所有带有 data-iframe-src 属性的链接，并为它们绑定点击事件处理函数。在事件处理函数中，首先调用 e.preventDefault() 阻止链接的默认行为（阻止跳转），然后通过 this.getAttribute("data-iframe-src") 获取当前点击链接的锚点 ID，并调用 setIframeSrc() 函数来切换 iframe 的页面。

这两个版本的实现都是基于纯前端的技术，适用于不同 HTML 文档之间的页面切换，并且可以根据具体需求灵活调整代码。在腾讯云的产品中，没有直接相关的产品与之对应。