我想实现一个像jsFiddle这样简单的Javascript Playground,并想知道实现这一目标的最佳方法。 从jsfiddle的工作方式来看,它使用提交的HTML / Javascript代码创建一个iframe。 iframe的来源来自jsfiddle服务器的动态创建页面。

我想知道是否可以使用客户端javascript代码执行此操作。 我试过这个但是没有用(自定义代码没有执行,也不知道iframe中是否加载了jquery):

$iframe = $(document.createElement("iframe"))

$html = $iframe.contents().find("html")

//HTML code
$html.children("body").append($(htmlcode))

//Javascript code (first jquery and then custom code)
$script = $(document.createElement("script"))
$script.attr("src","jquery.js")
$html.children("head").append($script)

$script = $(document.createElement("script"))
$script.html(javascriptcode)
$html.children("head").append($script)

$iframe.appendTo($("body"));

===============>>#1 票数:1 已采纳

你不必那么复杂。
只需打开一个新窗口(或iframe )并将HTML放入其中。

演示: http://jsfiddle.net/DerekL/uSrU6/4http://jsfiddle.net/DerekL/uSrU6/4更新

===============>>#2 票数:0

我也不完全确定我明白你究竟想做什么。 我认为您发布的代码中存在错误:

  1. 你试图将脚本附加到$html.children('head')$html不是$iframe本身,而是内容..我认为contents()不会返回一个DOM元素,所以其余的就是'无论如何都有效。 编辑 - 现在我在评论中看到常规js对你有用,所以这可能不是问题

  2. 我依稀记得在iframe中从另一个域调用js libs时,跨站点脚本存在问题。 不确定

编辑:发现它: 这里可能是这个问题。 这里也有一个解决方案

  ask by Seb translate from so

未解决问题?本站智能推荐:

2回复

如何使用HTML中的JavaScript来实现文本输入表单

我正在尝试在HTML的在线考试作业中使用JavaScript。 作为项目的要求,我们必须使用文本输入表单以及单选按钮等。 我已经处理了单选按钮的一部分,但是由于某种原因,我的文本输入表单无法正常工作。 使用主项目中的以下代码片段可以清楚地说明我的问题: 该代码的作用是,当用户在名为
1回复

HTML 5上的JavaScript

大家好,请让我知道以下声明的含义 请向我解释什么是addEvent()方法以及以上代码的作用。
2回复

在JavaScript和HTML中使用变量

我想使用一个变量,该变量是我通过javascript代码中的flask传递给html模板的。 这是一个示例:我有一个传递给html模板的列表,并且对该列表运行for循环 在这里,我有一个列表(组)并遍历该列表。 我的问题是,如果我想在jquery语句中执行该循环,那将如何工作?
3回复

使用javascript添加HTML标记

我动态添加html标签时遇到问题。 我正在创建一个输入标签 现在的问题是,当“valueString”包含撇号(')时,创建的输入值会从撇号中切断。 如何将变量附加为单个字符串? 如果我用双引号(“)改变撇号('),那么当变量包含双引号(”)时就会出现问题。
11回复

使用javascript对HTML列表进行排序

我有一组三个列表项,它们希望在页面加载时从高到低自动显示。 理想情况下使用jquery或javascript。 每个列表项都需要有自己的ID,因为它们每个都有各自的背景图像。 数字必须是文本节点,以便用户可以编辑它们。
2回复

使用javascript输出html

我有一个引用另一个.js文件的javascript链接。 我一直在尝试输出图像(用于测试目的),但我不确定这是什么方法。 我能够开始提醒,一直到中间。 似乎var links不起作用。 我正在尝试在此.js文件中使用HTML。 基本上,我希望能够做一些模态窗口,但我现在正试图输出
1回复

使用PHP用JavaScript编写HTML

所以我有了这个PHP,它正在编写一些看起来像这样的JavaScript: 但是,在阅读以下内容之后: http : //littleurl.info/wdl,我了解到我必须在一个附录中完成所有操作才能使DIV标签正确显示。 但是,我发现不可能正确设置语法,因为我是通过PHP来完成所有这
1回复

使用javascript将json显示为html

我有这个json数据。 我想使用javascript在html中显示它。 但遇到一些困难 下面是所需的输出格式。 html中的javascript, 如果您有任何想法请回覆。 提前致谢
1回复

使用HTML和Javascript的表单

我最近一直在使用HTML和JavaScript,并且尝试创建一个表单,在该表单中,我有一个外部javascript文件,该文件链接到html文件,该html文件调用一个函数来验证表单。 我的问题是,填写某些字段时,我的表单没有发出警报,或者表单提交错误。 这是我到目前为止的内容:
3回复

使用JavaScript生成的目标HTML?

我有一个使用JavaScript插件创建的滑块按钮,它会自动生成一个类名为.flex-next的元素。 但是,当我运行以下代码时,控制台中未记录任何内容: