Mi objetivo es tener una lista de búsqueda que, una vez que se haga clic en ella, muestre el PDF vinculado en un solo iframe emergente. Quiero mantener todo esto en la misma página, sin descargar nada. Por ejemplo, con los enlaces a, b y c, identifíquelos como todos los enlaces y abra un iframe, con suerte ahorrando tiempo al no tener que codificar iframes separados para cada enlace. Todo lo que se extrae proviene de una unidad compartida, se extraen con éxito usando "a" y "src". Intenté colocar el iframe en un "modal" emergente que usé en otra área para una hoja de contacto, pero cuando se usa rompe el modal. Solo puedo usar javascript, jquery no funciona. He probado 15 scripts diferentes y ninguno de ellos parece funcionar.

Todavía estoy aprendiendo y soy autodidacta, así que estoy seguro de que este código es feo, pero funciona.

CSS:

 input[type=text] { width: 150px; box-sizing: border-box; border: 2px solid black; border-raidus: 6px; font-size: 16px; background-color: detect; background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px; -webkit-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } input[type=text]:focus { width: 80%; } #myInput { font-size: 16px; border: 2px solid black; margin-bottom: 10px; } #myUL { list-style-type: none; padding: 0; margin: 0; width: 82%; } #myUL li { display: none; } #myUL li a { border: 4px solid black; background-color: #726E6D; padding: 10px; margin-top: 10px; text-decoration: none; font-size: 18px; color: black; display: block; target: _blank } #myUL li a:hover:not(.header) { border: 4px solid #FF6700; }

JavaScript

 <script> function myFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (filter!== "" && a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = "block"; } else { li[i].style.display = "none"; } } } </script>

HTML:

 <form> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Search the ShareDrive"> </form> <ul id="myUL"> <li><a href="#">Link A </a></li> <li><a href="#">Link B </a></li> <li><a href="#">Link C </a></li> </ul>

Gracias, me parece mucho, pero espero que no sea demasiado para ti.