我有一个网页-本地主机web服务器上的index.html-通过div元素和CSS样式表水平拆分为上/下窗格。
标题(超链接到源HTML文档(显示在上半部分。
<div id="titles"></div>
任务1。当我点击一个超链接的标题时，输出的目标是index.html上的DIV。这很好。
任务2。此外，当我点击该链接时，我想将选定的文本("片段"(发送到index.html.上的一个单独的DIV
我对第二项任务的编码良好的解决方案特别感兴趣。
下面是一个简化的示例，说明了任务。
更新根据已接受的答案，下面是更新后的示例(工作(。
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/
有多种方法可以实现这一点。但最简单的方法之一如下。
在您的示例中，您将目标发送到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, StackOverFlow!";
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;