Tengo una página web, index.html en un servidor web localhost, dividida horizontalmente a través de elementos DIV y una hoja de estilo CSS en paneles superior/inferior.
Los títulos (con hipervínculos a los documentos HTML de origen) aparecen en la división superior.
<div id="titles"></div>Tarea 1. Cuando hago clic en un título con hipervínculo, la salida se dirige a un DIV en index.html. Eso está funcionando bien.
Tarea 2. Además, cuando hago clic en ese enlace, quiero enviar el texto seleccionado ("fragmentos") a un DIV separado en index.html.
Estoy particularmente interesado en soluciones bien codificadas para la segunda tarea.
Aquí hay un ejemplo simplificado que ilustra las tareas.
Actualizar. Basado en la respuesta aceptada, aquí está el ejemplo actualizado (en funcionamiento).
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/
Hay múltiples maneras de lograr esto. Pero una de las formas más sencillas está a continuación.
En su ejemplo, está enviando el objetivo a un iframe. Y también desea enviar datos adicionales (fragmentos) al mismo iframe si lo entendí correctamente.
Para pasar datos adicionales, que son los fragmentos, puede hacerlo pasándolos como parámetros de URL como se muestra a continuación.
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; });Para leer y agregar esos datos dentro del marco, debe agregar algunas líneas de javascript y html en index.html como se muestra a continuación.
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;