Question

我见过很多问题＆amp;关于类似问题的答案，但我没有找到这个特殊案例的答案。

我在网页中有一个<div>，我将数据动态显示到图形中，它需要javascript进入<div>（使用dygraph库）。我希望实现一个复选框来更改图形代码和代码之间<div>的内容，以显示实时网络摄像头连接，这也需要脚本。

我已经尝试使用基于我找到的示例的innerHTML和jQuery函数，但是所有这些都是在没有脚本内容的情况下引用非常简单的HTML更改，我发现的更复杂的是如何更改图片进入<div>内容。我已经读过<div>不支持src属性，其他论坛说是，在我的情况下它没有用。图书馆div-src.js也不适用于此案例。

另一种尝试是<iframe>标记它已经有效，但页面不能正常工作并且不稳定，特别是websocket连接。 Eclipse显示一条警告说＆＃34;未知标签＆＃34;我读过在HTML5中<iframe>已经过时了。

我想用jQuery执行此操作，但直到知道没有成功。

使用脚本动态插入<div>长HTML代码块的最佳方法是什么？调用js库？

<input type="radio" name="radiobutton" value="graph" onClick="changeDivContent()">
<input type="radio" name="radiobutton" value="video" onClick="changeDivContent()">

<div id="graph-video">
 --- Block with HTML, nesting divs and javascript ---
</div>

注意：使用jQuery我尝试使用.load函数：

$( "#graph-video" ).load( "video.jsp" );
$( "#graph-video" ).load( "graphic.jsp" );

结果：图形代码导致故障并且websocket关闭。

Answer 1

试试这个

function changeDivContent() {
    $('#graph-video').html('<iframe width="420" height="345"src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>)');
}

或使用外部html文件

$('#graph-video').load('external_file.htm');

Answer 2

我认为你有各种各样的问题。首先是动态加载js文件。要做到这一点，你必须将它们添加为DOM对象，而不是内部HTML。为此目的，您可以使用此功能：

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

取自here。

对于div中的图片，它严重依赖于您所指的图片类型。

<img>在<div>：
中
$（＆＃39; img_selector_here＆＃39;）。attr（＆＃34; src＆＃34;，newSrc）;
<div>的背景属性：

$（＆＃39; div_selector＆＃39）。CSS（＆＃39;背景图像＆＃39;＆＃39; URL（img_url）＆＃39）;
<canvas>元素，与dygraph生成的元素一样：根据您的特定需求找到一个好的教程，您可以从查看here开始，因为canvas元素提供了大量的绘图选项和重绘。

使用包括脚本在内的长块动态更改div的源/内容

2 个答案: