Tengo algo de experiencia escribiendo páginas HTML/JS/CSS y he usado JavaScript extensamente para agregar elementos, cambiar elementos, actualizar estilo, clases, etc. y, de lo contrario, alterar la página en respuesta a las acciones del usuario. No estoy hablando de eso. Quiero decir que podría escribir algo como
var win = window.open('','newWindow'); win.document.write("<html>"); win.document.write("<head>"); win.document.write("<style>body {color:red;}</style>"); win.document.write("</head>"); win.document.write("<body>"); win.document.write("<h1>This is it</h1>"); win.document.write("</body>"); win.document.write("</html>");o incluso
var win = window.open('','newWindow'); var header = win.document.createElement("H1"); header.innerHTML = "This is it"; header.style.backgroundColor="red"; win.document.body.appendChild(header);pero ambas soluciones parecen bastante torpes. Sé que las personas usan AJAX para solicitar datos de diferentes fuentes para generar contenido en pantalla. Sé que hay herramientas como Node.js, JQuery y Angular que algunas personas utilizan para crear contenido HTML/JS/CSS. Tengo la sensación de que hay un método mejor con el que aún no me he topado.
Entonces, aquí está el escenario. Tiene un gran conjunto de datos de los que puede extraer, digamos una biblioteca de títulos de libros, autores, etc. y, por simplicidad, pongamos todo eso en un archivo .js con un solo objeto de datos JSON.
var library = { "Anne of Green Gables": {"Author": "Lucy Maud Montgomery", "Date":1908...}, ... };Quiero permitir que el usuario navegue por una lista de libros, seleccione uno y genere automáticamente una nueva página con el contenido de ese registro. Tal vez algo donde pueda poner descripciones de libros, etc. Tal vez algo como https://bookaudio.online .
¿Cómo generarías dinámicamente esas páginas?
Puedo pensar en varias formas en que podría hacerlo, pero todas se sienten como si estuviera usando las técnicas de 1990. Espero que alguien pueda contarme más sobre los métodos de 2020.
Es un veterano en el campo de las "bibliotecas front-end dinámicas", pero llega a un punto muy bueno en términos de características, curva de aprendizaje poco profunda (en comparación con los grandes bateadores como Vue o Ember), creación rápida de prototipos, extensibilidad y virtualmente no -requisitos de "herramientas secundarias" existentes: Knockout.js
function BookList(data) { this.books = data.books; this.selectedBook = ko.observable(); this.selectBoxTitle = ko.pureComputed(() => `There are ${this.books.length} books, pick one!`); } var data = { books: [ {Title: "Anne of Green Gables", Author: "Lucy Maud Montgomery", Date: 1908}, {Title: "Wuthering Heights", Author: "Emily Brontë", Date: 1847}, {Title: "Dracula", Author: "Bram Stoker", Date: 1897}, ] }; ko.applyBindings(new BookList(data)); <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script> <select data-bind=" options: books, optionsText: 'Title', optionsCaption: selectBoxTitle, value: selectedBook "></select> <div data-bind="with: selectedBook"> <h3 data-bind="text: Title"></h3> <p>Written by <b data-bind="text: Author"></b> in <span data-bind="text: Date"></span>.</p> </div> <hr> View Model: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>En respuesta a otra pregunta ( https://stackoverflow.com/a/70425478?noredirect=1 ), una respuesta sugirió que las ventanas emergentes no son óptimas aunque todavía se usan. Las nuevas ventanas con contenido dinámico no tenían una base adecuada para las direcciones relativas y encontró una solución a ese problema. Aún así, comentó:
"Creo que podría ahorrarse algunos problemas en cosas como esta al NO usar window.open (que tuvo una muy mala reputación en los días malos de las ventanas emergentes) y usar un div modal oculto en el que puede cargar (o escribir) html, luego mostrar. Sin embargo, es posible que tenga una razón completamente válida para usar la ventana emergente ".
Eso me dio más información y una búsqueda rápida arrojó varios artículos con alguna variación en "ventana emergente vs modal vs superposición vs intersticial". Aparentemente, estas son las cuatro técnicas que se utilizan para agregar contenido dinámicamente y la ventana emergente es la menos preferida como se sospechaba originalmente.
Como ejemplo, este sitio ( https://moz.com/blog/popups-seo-whiteboard-friday ) analiza diferentes formas de mostrar contenido dinámico en la ventana. La toma está dirigida específicamente a mejorar la clasificación en los motores de búsqueda, pero la descripción de los pros y los contras es muy útil. Sugiere que el método window.open es probablemente el menos preferido en el desarrollo web moderno. El video también sugiere a Google como una fuente de mejores prácticas. Con eso en mente, encontré esta ( https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on ) guía de 2016 de Google sobre el tema.
Entonces, aparte de cómo cargar contenido dinámicamente en uno de estos elementos, el método preferido para mostrar contenido dinámico probablemente no sea una nueva ventana.