我有一個網頁 - 本地網路服務器上的 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/
uj5u.com熱心網友回復：
有多種方法可以實作這一目標。但最簡單的方法之一如下。
在您的示例中，您將目標發送到 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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/456346.html
標籤：javascript html jQuery 阿贾克斯