javascript - JQuery 到 Javascript Document.Write

Question

Fiddle(使用 JQuery)- http://jsbin.com/ponikasa/1/edit

我知道 JQuery 是 Javascript，但为了争论，您如何在不需要像 JQuery 这样的 js 库的情况下用纯 Javascript 编写以下内容？

$(document).ready(function() {
  $('.preview-site').on('click', function(){
    window.open('javascript:document.write("'+ $('.workflow').val() +'")', 'Opened Page', 'width=660, height=440');
    return false;
  });
});

我试过了，但是没用。
非常感谢任何帮助。

window.onload = function() {
  var preview = document.getElementsByClassName("preview-site"),
      code = document.getElementsByClassName("workflow")[0].value;

  preview.onClick = function() {
    window.open('javascript:document.write("'+ code = +'")', 'Opened Page', 'width=660, height=440');
    return false;
  }
}

Answer 1

好吧，要用 javascript 编写，您需要执行以下操作

document.addEventListener('DOMContentLoaded', function() {
  var previewSite = this.querySelectorAll('.preview-site');

  var handler = function() {
    var workflow = document.querySelector('.workflow')
    window.open('javascript: document.write(' + workflow.value + ')', 'Opened Page', 'width=660, height=440')
    return false;
  };

  for( var i = 0; i < previewSite.length; i++) {
    previewSite[i].addEventListener('click', handler);    
  }
});

您遇到的问题是 getElementsByClassName 返回一个集合，因此您不能对集合使用 value 或 onclick。

我使用 querySelectorAll 因为它比 getElementsByClassName 更容易并且几乎有更好的支持

我通常不回答这样的问题，但我高度支持任何使用 jQuery 并希望自己真正学习 javascript 的人

此外，在您的问题中，您有 onClick，对于您想要的事件处理程序 onclick

对于一个小的性能改进，您可以将 workflow 移出 handler，这样它就不会在每次点击时都获取它，只有在您不这样做时才这样做打算添加动态.workflow

是的，还有。 (如评论中指出的) window.onload 与document ready 不同，window.onload 将等待图像和媒体完全加载，因此使用 DOMContentLoaded