如何使用JavaScript或jQuery提供预览功能？

Question

I have 3 templates (static html pages).

Based on my selection one template will open in the form of popup. I have to add some content to that template when I want to show that template in the form of popup. Now I'm showing that templates with using window.open(url) .

But I'm not able to add the content to that template while showing in the form of popup (in single word when I click on " preview " button in the form then popup will generate with predefined HTML template with some form data).

Basically I am looking for preview functionality using JavaScript or jQuery, so please provide code for the same.

Answer 1

create a test.html page and Paste this code into the HEAD section of your HTML document.

function displayHTML(form) {
  var inf = form.htmlArea.value;
  win = window.open(", ", 'popup', 'toolbar = no, status = no');
  win.document.write("" + inf + "");
}

Paste this code into the BODY section of your HTML document

<form>
  <textarea name="htmlArea" cols=45 rows=6></textarea>
  <br>
  <input type="button" value=" view " onclick="displayHTML(this.form)">
</form>

Test it in browser..

If found helpfull please do the same in your code.

Answer 2

if you use window.open() you can give a name to your window and then manipulate the content of that window:

var win = window.open(url, 'mywindow');
win.document.write('<h1>Popup Test!</h1>');

if the window with name 'mywindow' doesn't exist it will open a new one, otherwise it will use the existing window