Web:如何重定向到填充了信息的 CodePen 或 JsFiddle?
Web: how to redirect to a CodePen or JsFiddle with information filled?
我正在写一个Js解析器,里面有三个文件的内容:HTML、JS和CSS。以下代码是我的 JS 变量的示例:
var html = '<div class="box"></div>';
var css = '.box{height: 200px; width: 200px; background-colour:red;}';
var js = 'window.alert("Here we go!");'
网上最常用的是CodePen和JsFiddleIDE。我想知道我是否可以重定向到任何一个页面,with HTML CSS JS文本区域填充了我的变量 , 因此用户将能够自己编辑代码。
我不确定它是否有形。如果有人指出方向,我会很高兴。
非常感谢您的帮助。
尝试以下操作(从 https://docs.jsfiddle.net/api/display-a-fiddle-from-post 中检索):
body { font-family: Helvetica, Tahoma; }
h2 { font-size: 1.5em; margin-bottom: 10px; display: block;}
p { margin-bottom: 15px; display: block; font-size: 0.8em; }
label { font-weight: bold; }
textarea, input[type=text] {
padding: 3px 5px;
width: 80%;
display: block;
border: 1px solid #ddd;
margin-bottom: 5px;
}
textarea { height: 70px; }
<h2>Load a fiddle based on the POST variables</h2>
<form method='post' action='http://jsfiddle.net/api/post/mootools/1.3/dependencies/more/' target='check'>
<p><input type='submit'/> - fiddle will be loaded in different browser window/tab.</p>
<select name="panel_html">
<option value="0">HTML</option>
</select>
<textarea name='html'><p class="red">It's magic!</p>
<p><a href="http://doc.jsfiddle.net/api/post.html">Documentation</a></p></textarea>
<select name="panel_js">
<option value="0">JavaScript</option>
<option value="1">CoffeeScript</option>
<option value="2">JavaScript 1.7</option>
</select>
<textarea name='js'>window.addEvent('domready', function() {
$$('p.red').each(function(el) {
el.setStyle('color', '#00ff00');
});
});</textarea>
<select name="panel_css">
<option value="0">CSS</option>
<option value="1">SCSS</option>
</select>
<textarea name='css'>p {font-family: Helvetica, Arial; }</textarea>
<label>Title:</label>
<input type='text' name='title' value='some title'/>
<label>Description:</label>
<textarea name='description'>descr</textarea>
<label>Resources (comma separated, no spaces):</label>
<textarea name='resources'>http://abc.it/xyz.js</textarea>
<label>DTD:</label>
<input type='text' name='dtd' value='html 4'/>
<label>Wrap (l/d/h/b)</label>
<input type='text' name='wrap' value='l'/>
</form>
另请查看链接 fiddle:http://jsfiddle.net/3Lwgk4c5/
我正在写一个Js解析器,里面有三个文件的内容:HTML、JS和CSS。以下代码是我的 JS 变量的示例:
var html = '<div class="box"></div>';
var css = '.box{height: 200px; width: 200px; background-colour:red;}';
var js = 'window.alert("Here we go!");'
网上最常用的是CodePen和JsFiddleIDE。我想知道我是否可以重定向到任何一个页面,with HTML CSS JS文本区域填充了我的变量 , 因此用户将能够自己编辑代码。
我不确定它是否有形。如果有人指出方向,我会很高兴。 非常感谢您的帮助。
尝试以下操作(从 https://docs.jsfiddle.net/api/display-a-fiddle-from-post 中检索):
body { font-family: Helvetica, Tahoma; }
h2 { font-size: 1.5em; margin-bottom: 10px; display: block;}
p { margin-bottom: 15px; display: block; font-size: 0.8em; }
label { font-weight: bold; }
textarea, input[type=text] {
padding: 3px 5px;
width: 80%;
display: block;
border: 1px solid #ddd;
margin-bottom: 5px;
}
textarea { height: 70px; }
<h2>Load a fiddle based on the POST variables</h2>
<form method='post' action='http://jsfiddle.net/api/post/mootools/1.3/dependencies/more/' target='check'>
<p><input type='submit'/> - fiddle will be loaded in different browser window/tab.</p>
<select name="panel_html">
<option value="0">HTML</option>
</select>
<textarea name='html'><p class="red">It's magic!</p>
<p><a href="http://doc.jsfiddle.net/api/post.html">Documentation</a></p></textarea>
<select name="panel_js">
<option value="0">JavaScript</option>
<option value="1">CoffeeScript</option>
<option value="2">JavaScript 1.7</option>
</select>
<textarea name='js'>window.addEvent('domready', function() {
$$('p.red').each(function(el) {
el.setStyle('color', '#00ff00');
});
});</textarea>
<select name="panel_css">
<option value="0">CSS</option>
<option value="1">SCSS</option>
</select>
<textarea name='css'>p {font-family: Helvetica, Arial; }</textarea>
<label>Title:</label>
<input type='text' name='title' value='some title'/>
<label>Description:</label>
<textarea name='description'>descr</textarea>
<label>Resources (comma separated, no spaces):</label>
<textarea name='resources'>http://abc.it/xyz.js</textarea>
<label>DTD:</label>
<input type='text' name='dtd' value='html 4'/>
<label>Wrap (l/d/h/b)</label>
<input type='text' name='wrap' value='l'/>
</form>
另请查看链接 fiddle:http://jsfiddle.net/3Lwgk4c5/