Question

我正在尝试在D3树上创建一个浮动视频播放器（http://bl.ocks.org/csarsurvey/8999077）。

Brightcove有一个包含Html，CSS和Javascript的工作示例。参见

https://docs.brightcove.com/en/player/brightcove-player/samples/floating-video.html

应通过javascript动态创建以下代码：

<div id="playerWrapper" class="drag">
<iframe src='//players.brightcove.net/1752604059001/15933ac1-884c-40e0-8cae-a06c7d9e4c0a_default/index.html?videoId=4511340777001' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

我编写了以下函数，但这会破坏树并创建一个新页面，而不是按照预期在树上浮动。

    function node_onMouseOver(d) {
    if (!d._children) {
        document.body.innerHTML="<div id=" +
        "\"playerWrapper\"" +
        " class="   + 
        "\"drag\"" +
        " style=" +
        "position:fixed;top:246px;left:984px;" + ">" +
     "<iframe src="  +
     "video.html " +
     "allowfullscreen=" +
     "\"\"" +
     " webkitallowfullscreen="  +
     "\"\"" +
    " mozallowfullscreen=" +
     "\"\"" +
     " frameborder=" +
     "\"0\"" +
     " width=" +
     "\"650\"" +
     " height=" +
     "\"500\""  +
    " ></iframe> </div>"
            }
    }

如何根据用户事件在最初位于指定节点的树顶部创建浮动可拖动视频？

热烈的问候， KrikKrak

Answer 1

您可以使用JS创建HTML代码，并将其与document.write()一起使用，如下所示：

JS

     var el ="<div id=" +
    "\"playerWrapper\"" +
    " class="   + 
    "\"drag\"" +
    " style=" +
    "position:fixed;top:246px;left:984px;" + ">" +
 "<iframe src="  +
 "video.html " +
 "allowfullscreen=" +
 "\"\"" +
 " webkitallowfullscreen="  +
 "\"\"" +
" mozallowfullscreen=" +
 "\"\"" +
 " frameborder=" +
 "\"0\"" +
 " width=" +
 "\"650\"" +
 " height=" +
 "\"500\""  +
" ></iframe> </div>"
        }
}

HTML

 <body>
  <script>
    document.write(el);
 <\script>

Answer 2

function node_onMouseOver(d) {
    if (!d._children) {
        var el = '<div id="playerWrapper"  class="drag"  style="position:fixed;top:246px;left:984px;" <iframe src="video.html" allowfullscreen=""' +
            ' webkitallowfullscreen=""  frameborder="0"  width="650"  height="500"></iframe> </div> ';

        $('#ID').append(el);
    }
}

我希望它有效。

如何使用javascript编写html div内容？

2 个答案: