将文本数据定位到网页上的 DIV？

Question

我有一个网页 - index.html 在本地主机网络服务器上 - 通过 DIV 元素和 CSS 样式表水平拆分为上/下窗格。

标题（hyperlinked 源 HTML 文档）出现在上半部分。

<div id="titles"></div>

任务 1。当我单击一个 hyperlinked 标题时，输出被定位到 index.html 上的 DIV。效果不错。

任务 2。此外，当我单击 link 时，我想将选定的文本（“片段”）发送到 index.html 上的单独 DIV。

我对第二个任务的 well-coded 解决方案特别感兴趣。

这是一个简化的示例，说明了任务。

更新。 根据接受的答案，这里是更新的示例（有效）。

var snippets = "<div><p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>.</p></div>";

$('a#documents_tab').on("click", function() {
  var url = $(this).attr('href');
  $('[id*=documents_div]').html('<iframe src="' + url + '" /></iframe>');
  return false;
});

$("a#documents_tab").on("click", function() {
  var url = $(this).attr("href");
  let ele = document.getElementById("snippets_div");
  ele.innerHTML = snippets;
  $("[id*=documents_div]").html(
    '<iframe src="' + url + "?txt=" + snippets + '" /></iframe>'
  );
  return false;
});

a {
  font-size: 12px;
}

h5 {
  margin: 0px;
}

iframe {
  width: 100%;
}

p {
  font-size: 12px;
  color: brown;
}

#snippets_div p {
  font-size: 11px;
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h5>Titles</h5>
  <a id="documents_tab" href="https://example.com/">Example.com</a>
  <hr>
  <h5>Documents</h5>
  <div id="documents_div"></div>
  <hr>
  <h5>Snippets</h5>
  <div id="snippets_div">
    <!-- <iframe id="preview_iframe"></iframe> -->
  </div><br />
  <h5>Other content</h5>
  <div>
    <p>Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam. Nam ut fringilla enim.</p>
  </div>
</body>

JSFiddle：https://jsfiddle.net/vstuart/47srd1bc/128/

Answer 1

有多种方法可以实现这一点。但最简单的方法之一如下。

在您的示例中，您将目标发送到 iframe。如果我理解正确，您还想将其他数据（片段）发送到同一个 iframe。

要传递额外的数据片段，您可以像下面那样传递 url 参数。

var snippets = "<div><p>bananas; <b>carrots</b></p></div>";

      $("a#documents_tab").on("click", function () {
        var url = $(this).attr("href");
        let theSnippetText = "Hello, Whosebug!";
        let ele = document.getElementById("snippets_div");
        ele.innerHTML = snippets;
        $("[id*=documents_div]").html(
          '<iframe src="' + url + "?txt=" + snippets + '" /></iframe>'
        );
        return false;
      });

要在框架内读取和附加该数据，您需要在 index.html 中添加几行 javascript 和 html，如下所示。

HTML

<h3>Snippets</h3>
    <div id="snp"></div>

JavaScript

let params = new URL(document.location).searchParams;
      let txt = params.get("txt");
      document.querySelector("#snp").innerHTML = txt;

将文本数据定位到网页上的 DIV？

Targeting textual data to a DIV on a web page?

html

javascript

ajax

jquery