Question

我正在尝试在新的弹出框中渲染div。我正在使用：

var popup = window.open('about:blank','instructions','width=300,height=200');
popup.onload = function() {
    jQuery(popup.document.body).append(".chart");
}

将名为chart的div附加到弹出窗口。这只是创建一个空白的弹出窗口，div仍然在同一个html页面上呈现。这是我的jsfiddle。我不明白这里出了什么问题。根据我的理解，它应该打开div作为新的弹出窗口。此外，这个div是动态创建的。

更新：我还试图像这样附加div：

    var popup = window.open('about:blank','instructions','width=300,height=200');
    popup.onload = function() {
    document.getElementById("popup").appendChild(".chart");
}

即使这样也行不通。如果有任何其他方法在新弹出窗口中呈现div，请告诉我

Answer 1

试试这个

 var html = $('.chart').html();
  var popup = window.open('about:blank','instructions','width=300,height=200');
  popup.onload = function() {
    jQuery(popup.document.body).append(html);
  }

Answer 2

这样就可以了解

var html = $('.chart').html();
 var popup = window.open('','instructions','width=300,height=200');
 $(popup.document.body).html(html);

但在此之前，请注意在你的html中，div与选择器类＆＃39; chart＆＃39;是空的。我认为你需要在该表的末尾关闭该div。

更新

对于CSS

将css内联如下

<style id="chartcss">
    .chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
</style>

并将您的代码更新为：

var html = $('.chart').clone();
 var popup = window.open('','instructions','width=300,height=200');
 $(popup.document.body).append(html).append($('#chartcss'));

Answer 3

尝试将附加内容更改为：

jQuery(popup.document.body).append($(".chart").html());

您正在使用字符串值＆＃34; .char＆＃34;而不是对div的引用 $（＆＃34; .char＆＃34; ）

更新：让我们尝试旧学校。

popup.document.write($(".chart").html());

提示：实际上，因为弹出窗口是打开的 about：blank onload事件从未调用过，我想这是因为没有要加载的内容。 / p>

我删除了封闭功能并且它有效，可能上面提到的两种解决方案也都有效。

小提琴的叉子here

Answer 4

你正在用window.open（）方法打开一个新的浏览器窗口，你不能在前一页用javascript修改它，我建议使用Twitter Bootstrap的“模态”javascript和html功能，所以你实际上并没有打开另一个窗口，只是当前页面中看起来像一个

的div

这是一个链接：http://getbootstrap.com/javascript/#modals

Div没有出现在弹出窗口内

4 个答案: