用例:我正在使用模板构建器应用程序.用户可以使用不同的组件构建html模板,如文本框,图片框,幻灯片等.
问题:我们面临的问题是幻灯片组件.我们正在使用nivoslider插件来构建它.滑块必须具有用户可以更改转换时间,选择转换等设置.用户可以添加多个幻灯片放映.
现在的问题是当我们添加多个幻灯片时,每个幻灯片可能都有自己的参数,所以我们不能有一个共同的功能.而且,用户可以回来编辑模板,所以我们需要为每个幻灯片显示独立的脚本.
研究:我们的基本结构有效,但卡在一个地方.我们需要script在用户添加到页面的每个幻灯片中附加一个标签.
return '<div id="slider" class="nivoSlider">'+
'<div class="">'+
'<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide01.jpg" data-thumb="images/slideShow/thumb/slide01.jpg" alt="" />'+
'</div>'+
'<div class="">'+
'<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide02.jpg" data-thumb="images/slideShow/thumb/slide02.jpg" alt="" />'+
'</div>'+
'<div class="">'+
'<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide03.jpg" data-thumb="images/slideShow/thumb/slide03.jpg" alt="" />'+
'</div>'+
'<div class="">'+
'<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide04.jpg" data-thumb="images/slideShow/thumb/slide04.jpg" alt="" />'+
'</div>'+
'</div>'+'<script>$("#slider").nivoSlider({effect: "sliceDown",animSpeed: 500,pauseTime: 3000,startSlide: 0,controlNavThumbs: true,controlNavThumbsFromRel:true, pauseOnHover: true,manualAdvance: false});</script>';
代码末尾的脚本标记是我们尝试附加到HTML并将其保存到数据库的内容.我们尝试了一个空白<div id="temp"></div>并在其中附加脚本标记,但我相信jQuery …
我在我的应用程序中使用谷歌地图 API，如下所示：
在 index.html 中使用 api 键导入 url ：
<script src="https://maps.googleapis.com/maps/api/js?key=myKey"></script>
并在组件中像这样声明谷歌：
declare let google: any;
并在这样的组件中使用它：
this.map = new google.maps.Map(document.getElementById('googleMap'), this.mapProp);
如何动态更改 index.html 中存在的 API 密钥？
google-maps google-maps-api-3 angular2-services angular angular7
最终更新：第二个代码块正在运行——我只是漏输入了 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");
});
更新：当光标图标最终完成工作时（大约 …
是否有可能创建类似于:
var jsfile = "code....";
(a=(b=document).createElement('script')).src=jsfile;
b.body.appendChild(a);
'jsfile'就像一个外部的js文件,但在我们的例子中将是一个变量？
我的所有测试都失败了,我成功获得了'jsfile'的输入,但如果obj中有函数(记得我希望它像外部js文件一样预先形成),它们就没有执行.
测试示例:
var jsfile = "code....";
(a=(b=document).createElement('script')).text=(jsfile);
b.body.appendChild(a);
我正在构建一个模块化的网络应用程序，其中要处理各种用户创建的模型。Shadow DOM 是一个明显的选择，但我不明白 JS 如何在 Shadow DOM 中执行。
我有一个 HTML 内容要使用以下虚拟脚本加载。
<h1>Nice header</h1>
<script type="text/javascript">
console.log('hello')
alert('hi');
</script>
我使用之前的脚本加载页面，如下所示：
<div id="shadow-target"></div>
<div id="non-shadow-target"></div>
<script>
// Called on btn click
loadShadow = function(module) {
var root = document.querySelector('#shadow-target').createShadowRoot();
var lighttarget = document.querySelector('#non-shadow-target');
$.get('whatever.html', function (data) {
alert(data);
$(root).append(data); // Nothing executed
$(lighttarget).append(data); // Works fine
// The header appears in both cases
});
}
</script>
正如评论所说，当内容插入到影子 DOM 根时，JS 不会被执行。标头在两种情况下都会出现，但脚本仅在 light DOM 中执行。这是为什么？自定义JS如何在shadow DOM中执行？（没有跨域的东西。）
我有点困惑如何做到这一点,基本上我有一个页面,通过JavaScript插入Facebook Share按钮:
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
问题是它阻止了该部分的页面加载,如何在页面加载后插入此标记并仍然执行脚本？我想以一种不引人注目的方式来做这些想法吗？
我认为我可以使用jQuery的.append()并将它们添加到头部,但这似乎不适用于我的外部脚本(Knockout.js).
这是我加载页面时运行的代码.它似乎适用于样式表,但不适用于外部脚本.
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.0') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
"http://code.jquery.com/jquery-1.8.0.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want …这是我的代码:
<script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: "profile",rpp: 4,interval: 30000,width: 650,height: 202,theme: {shell: {background: "#7ee1fc",color: "#2e2e2e"},tweets: {background: "#ffffff",color: "#949494",links: "#009ece"}},features: {scrollbar: true,loop: false,vlive: false,hashtags: true,timestamp: true,avatars: false,behavior: "all"}}).render().setUser("microsoft").start();</script>
加载一个twitter插件(但事实上,这并不重要).那么,现在,如果我用"字符串"编写整个代码并通过jQuery追加它:
var myText='<script src="http://widgets.twimg.com/j/2/widget.js"><\/script><script>new TWTR.Widget({version: 2,type: "profile",rpp: 4,interval: 30000,width: 650,height: 202,theme: {shell: {background: "#7ee1fc",color: "#2e2e2e"},tweets: {background: "#ffffff",color: "#949494",links: "#009ece"}},features: {scrollbar: true,loop: false,vlive: false,hashtags: true,timestamp: true,avatars: false,behavior: "all"}}).render().setUser("microsoft").start();<\/script>'
$('#twitterContent').html(myText);
似乎它无法加载它(我得到一个错误,TWTR没有定义).
那么为什么一个版本应该有效而另一个版本不适用？我该如何解决这个问题呢？
PS如果你想要测试代码,这就是小提琴.
基本上我想要做的是,使用JQuery,直接在页面上的结束体标记之前添加脚本.
AKA
SCRIPT HERE
</body>
有没有办法做到这一点,如果是这样,怎么样？
我正在使用ajax加载reCaptcha.从其他页面返回的内容中的一行是下面的行,div当我使用时,该行不会被加载到我的行中$(.cap).html(callBack);
这就是这条线
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>
这是jQuery不允许的吗？或者我做错了什么？我怎么解决这个问题？如何将jquery从另一个页面返回到我的<div>？
我正在测试的是,很简单:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Tile</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQuery.js"></script>
<style type="text/css">
.user {
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//$(".user").live("click",function() {
$(".user").click(function() {
data = "id=Hello"
$.ajax({
type:"GET",
url:"demo.php",
data:data,
dataType:"html",
beforeSend:function(html){
},
success: function(callBack){
$(".cap").html(callBack);
console.log(callBack);
},
error: function(page_data){
},
});
});
});
</script>
</head>
<body>
<div id="container">
<div class="cap">Hello</div>
<span class="user">Add User</span>
</div>
</body>
</html>
这是从其他页面返回的行不会被加载到div.
<script type="text/javascript" …
javascript ×8
jquery ×7
ajax ×1
angular ×1
angular7 ×1
dynamic ×1
google-maps ×1
html ×1
iframe ×1
onload ×1
shadow-dom ×1
slideshow ×1