Question

我正在构建一个网页，我希望div从源页面弹出到另一个页面。

我正在构建的网页的屏幕截图：

切换面板onClick的

Button我希望整个Ticker Panel div在具有相似宽度，高度和CSS属性的新浏览器窗口中弹出。另外，我不想在新窗口中显示Button。

HTML文件：

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Ticker Panel <button class="btn btn-default pull-right ticker-pop-out" type="submit">Button</button></h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>Market Id</th>
                    <th>Ticker Price</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td><span class="badge bg-red">55%</span></td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td><span class="badge bg-yellow">70%</span></td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td><span class="badge bg-light-blue">30%</span></td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td><span class="badge bg-green">90%</span></td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td><span class="badge bg-red">55%</span></td>
                </tr>
                <tr>
                    <td>6.</td>
                    <td><span class="badge bg-yellow">70%</span></td>
                </tr>
                <tr>
                    <td>7.</td>
                    <td><span class="badge bg-light-blue">30%</span></td>
                </tr>
                <tr>
                    <td>8.</td>
                    <td><span class="badge bg-green">90%</span></td>
                </tr>
                <tr>
                    <td>9.</td>
                    <td><span class="badge bg-green">90%</span></td>
                </tr>
                <tr>
                    <td>10.</td>
                    <td><span class="badge bg-red">55%</span></td>
                </tr>
                <tr>
                    <td>11.</td>
                    <td><span class="badge bg-yellow">70%</span></td>
                </tr>
                <tr>
                    <td>12.</td>
                    <td><span class="badge bg-light-blue">30%</span></td>
                </tr>
                <tr>
                    <td>13.</td>
                    <td><span class="badge bg-green">90%</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- /.box-body -->
</div>

我尝试执行以下操作：

function nWin() {
    var w = window.open();
    var html = $(".ticker-pop-out").html();
    $(w.document.body).html(html);
}

$('.ticker-pop-out').on('click', function () {
    nWin();
});

但我只在新窗口中输出“Button”作为输出。请帮助。

Answer 1

您的CSS选择器错误。

function nWin() {
    var w = window.open();
    var html = $("div.box").html();
    $(w.document.body).html(html);
}

对于评论中提到的其他问题，这是您需要的！

从实际页面恢复所有css引用：

var cssReferences;
$('link[rel="stylesheet"]').each(function(i, item){
  if (item.outerHTML){
    cssReferences += item.outerHTML
  }
});

使用相同的逻辑来恢复一些可能的css / javascripts依赖：

var scriptFilesReferencess;
$('script[src]').each(function(i, item){
  if (item.outerHTML){
    scriptFilesReferencess += item.outerHTML
  }
});

这是隐藏按钮的脚本片段（它的格式是为了让您获得更好的视野，并且它具有Jquery依赖性）：

var scriptSnippetHideButton = '
<script type="text/javascript">
  $(document).ready(){
    var buttonToHide = $("#ButtonToHide");
    if (buttonToHide && buttonToHide.length > 0){
      buttonToHide.hide();
    }
 }
</script>
';

最后，您必须在新页面的标题中包含这些新变量：

function nWin(){
    var w = window.open();
    var html = $('div.box').first().html();
    $(w.document.head).html(cssReferences + scriptFilesReferencess +  scriptSnippetHideButton);
    $(w.document.body).html(html);
}

Answer 2

我认为问题在于你正在获得要显示的类的按钮类intead。试试这个：

fig, ax = plt.subplots(figsize=(8,6))
df.groupby(['col1', 'col2']).plot(ax=ax)

您的代码：

function nWin() {
    var w = window.open();
    var html = $(".classYouWantToAppear").html();
    $(w.document.body).html(html);
}

班级＆＃34; classYouWantToAppear＆＃34;应该是你希望它被渲染的类。

Answer 3

我总是使用查询字符串来做这些事情。在页面末尾添加此代码：

<script>
    (function ($) // to get query string 
    {
        $.QueryString = (function (a)
        {
            if (a == "") return {};
            var b = {};
            for (var i = 0; i < a.length; ++i)
            {
                var p = a[i].split('=');
                if (p.length != 2) continue;
                b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
            }
            return b;
        })(window.location.search.substr(1).split('&'))
    })(jQuery);
    if ($.QueryString["btn"] == "hide")
        $('#your_botton_Id').hide();
</script>

并打开窗口使用：

window.open(CURRENT_URL + '?btn=hide');

如果您当前的页面有查询字符串，请执行此操作

window.open(CURRENT_URL + '&btn=hide');

单击按钮可在新窗口中显示div（及其CSS属性）

3 个答案:

您的代码：