最终更新：第二个代码块正在运行——我只是漏输入了 URL。
我正在尝试将动态创建的脚本放入 iframe 中。我可以访问 iframe 的头部，但它似乎不接受追加请求。控制台日志调用返回 head 标记，并且以下将文本附加到正文中效果很好。我还尝试将脚本标签附加到正文。（注意：脚本标记不在同一域中，因此我避免使用 getScript 或 ajax）。
$(document).ready(function() {
$('<iframe></iframe>', {
name:"contentFrame"
,id:"contentFrame"
}).css("height", 300).css("width", 500).load(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//cross-domain.com/script.js";
console.log($(this).contents().find("head")); // outputs: [<head></head>]
$(this).contents().find("head").append(script); // doesn't work
$(this).contents().find("body").append(script); // doesn't work
$(this).contents().find("body").append("Test"); // works
}).appendTo("#content");
});
这是根据以下建议成功附加脚本的新版本，但该脚本不会评估（通过简单警报进行测试）。另外，另一个奇怪的地方是：“正在工作”图标显示大约 15 秒，状态（在 Chrome 中）显示“正在检索...”最终它停止了，但没有任何反应。
$(document).ready(function() {
$('<iframe></iframe>', {
name:"contentFrame"
,id:"contentFrame"
}).css("height", 300).css("width", 500).load(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//cross-domain.com/script.js";
console.log($(this).contents().find("head"));
$(this).contents().find("head")[0].appendChild(script);
$(this).contents().find("body").append("Test");
}).appendTo("#content");
});
更新：当光标图标最终完成工作时（大约 …
我使用JQuery创建了一个DOM片段:
var $content = $("<div /", {id:"content"})
我想将片段输出为字符串,所以我试图:
$content.html();
返回一个空字符串,因为没有子节点.如何返回包含以下内容的字符串:
<div id="content" />
在下面的代码中,我故意抛出一个错误,但在Chrome中(仅用于测试目的)它不会卷入捕获.如何将错误汇总到父级的范围内？
try {
setTimeout(function() {
console.log("Throwing Error...");
throw({message:"Ouch!"});
}, 500);
} catch(e) {
console.log(e.message);
}
Chrome回复:
Uncaught #<Object>
(anonymous function)
这是我正在使用的完整示例; 当我需要"bob"时(故意)超时.我想捕获requirejs错误,所以我可以使用我的应用程序的错误系统,它更健壮,通知学习者.
(function() {
try {
var scriptVersion = "1.0.0.1"
window.onload = function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//content.com/pkg/" + scriptVersion + "/require-jquery.js";
script.async = false;
script.done = false;
// OnReadyStateChange for older IE browsers
script.onload = script.onreadystatechange = function() {
if(!(this.done) && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
this.done = …我正在使用Javascript打开一个空白窗口,用最小的填充它并注入一个脚本标记以包含JQuery,但是窗口属性readyState永远不会超过加载,因此JQuery永远不会触发.这是关于jsFiddle的演示.我无法弄清楚为什么弹出窗口不会更新其readyState.
var popup = window.open("", "popup", "height=500,width=700");
var doc = popup.document;
doc.write("<!doctype html><html><head></head><body></body></html>");
var script = doc.createElement("script");
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
script.onload = function() {
console.log(doc.readyState);
popup.$(document).ready(function() {
console.log(doc.readyState);
});
}
doc.getElementsByTagName("head")[0].appendChild(script);
这里是没有JQuery的类似代码 - 与readyState窗口属性相同的问题永远不会超出"加载".
var popup = window.open("", "popup", "height=500,width=700");
var doc = popup.document;
doc.write("<!doctype html><html><head></head><body></body></html>");
console.log(doc.readyState);
我需要在Twig中动态设置对象属性名称:
{% set featureId = feature.id %}
{% set gridEnabled = gridEnabled|merge({featureId: true}) %}
但那是"featureId"一个属性gridEnabled.有没有办法告诉Twig这featureId是一个变量？我很惊讶它把它解释为没有引号的字符串.
后续问题:这是全套 - 我能够进一步减少到"feature.id".这些线可以合并吗？
{% set gridEnabled = grid.enabled %}
{% set gridEnabled = gridEnabled|merge({(feature.id): true}) %}
{% set grid = grid|merge({'enabled':gridEnabled}) %}
我需要一个绝对定位的容器，该容器的大小应与内容的大小一样大（以便与容器后面的内容进行尽可能多的交互），但绝对不能超过最大高度（窗口的高度）。
内容具有三个子DIV，顶部两个是静态高度，如果滚动超过了父级的最大高度，则底部将使用滚动条占据剩余空间，该内容将被隐藏或显示。如果容器的高度为静态高度，则此方法效果很好，但是如果容器的高度仅为最大高度，则似乎孩子的calc无法正常工作，并且内容仅被裁剪。
编辑：需要支持IE 9+。
小提琴：https：//jsfiddle.net/z87cnmr2/1/
#container {
position: absolute;
top: 0;
left: 0;
max-height: 100%;
/* uncomment this static height to see it work */
/* height: 100%; */
width: 100px;
overflow: hidden;
}
#tip {
background: #ff0;
height:20px;
}
#top {
background: #f00;
height:20px;
}
#btm {
background: #0f0;
max-height: calc(100% - 40px);
overflow-y: auto;
}
html, body {
padding: 0;
margin: 0;
height:100%;
width:100%;
}<div id="container">
<div id="tip">Tips</div>
<div id="top">Tops</div>
<div id="btm">
Btm<br>
Btm<br> …javascript ×3
jquery ×2
css ×1
height ×1
html ×1
iframe ×1
max ×1
object ×1
popup ×1
properties ×1
readystate ×1
scroll ×1
string ×1
twig ×1