在一个div中写一个js脚本
Posted
技术标签:
【中文标题】在一个div中写一个js脚本【英文标题】：Write a js script in a div 【发布时间】：2015-09-14 02:43:06 【问题描述】：我正在尝试使用 jQuery 从另一个网站获取脚本，然后 document.write
这是我的代码
var url = "https://code.jquery.com/jquery-1.10.2.js";
var dam = $.getScript(url);
document.write(dam);
但这不起作用！
我在页面上看到的都是[object Object]
如果没有 XHR，这可以实现吗？
jsfiddle
【问题讨论】：
为什么不使用 url 包含脚本？为什么要把它写到一个 div 中？ 只是想知道是否有人可以做到这一点:)，这对我来说真的很重要。 在向您的问题添加赏金之前，至少要完成使其成为真正问题的动作。没有人对你真正追求的东西有任何真正的想法。 （我的直觉是这是一个X-Y problem）。请清理您的问题。如需进一步参考，请参阅help center。 AFAIK $.getScript(url) 获取脚本并执行它，您将可以访问脚本中的变量，但不能访问源本身。 那么，@MahmoudGamal，你想做什么？你的问题不清楚。请详细说明。 【参考方案1】：让它更容易......用我的小提琴
http://jsfiddle.net/wwwfzya7/1/
我使用 javascript 创建了一个 html 元素
var url = "https://code.jquery.com/jquery-1.10.2.js";
var script = document.createElement("SCRIPT"); //creates: <script></script>
script.src = url; //creates: <script src="long_jquery_url.js"></script>
document.body.appendChild(script); //adds the javascript-object/html-element to the page.!!!
【讨论】：
这将返回[object HTMLScriptElement]
那是因为你正在使用 DOCUMENT.WRITE()
使用 document.body.appendChild(script)
使用 document.body.appendChild(script); 时没有任何反应。我检查了你的小提琴，它也不能在那里工作！
尝试 document.head.appendChild(script) 或者 document.appendChild(script).. 但不要在 JSFiddle 内部执行。JSFiddle 有奇怪的限制，所以在本地单独执行文件，不在 JSFIddle 上。【参考方案2】：
不要使用document.write、it does not do what you think it does。它不做的是在文档末尾写入一些数据。它所做的而不是，是将数据通过管道传输到当前的写入流中。如果没有写入流，它将创建一个新流，重置文档的内容。所以调用 document.write(dam) 意味着你刚刚擦除了你的文档。 document.write 是早期 JavaScript 时代的一个低级 JS 函数，不要使用它。
相反，你想使用现代的 DOM 操作函数，所以在 jQuery 中，就是这样的：
$(document.head).append($("<script>").attr("src", url));
在哪里
$("<script>")
构建一个新的脚本元素，
$(...).attr("src", url)
将“src”属性设置为您需要的属性，并且：
$(document.head).append(...)
或
$(document.body).append(...)
将脚本加载到您的文档中。如果是带有src 属性的纯脚本，它基本上可以去任何地方，如果是带有文本内容的脚本应该运行，则只能通过document.head 实现。
虽然如果它只是一个你需要加载并运行的脚本，你可以使用getScript，但是你不需要做任何其他事情，它只是：
var url = "https://code.jquery.com/jquery-1.10.2.js";
jQuery.getScript(url);
完成，jQuery 将加载脚本并执行它。什么都没有返回。
当然，您展示的代码是使用 jQuery 加载 jQuery，所以这有点奇怪。如果您只想在页面上加载 jQuery，显然您只需使用 HTML：
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<script src="http://https://code.jquery.com/jquery-1.10.2.js"></script>
</body>
</html>
在最后加载脚本，因此脚本加载不会阻塞您的页面。最后：为什么我们要加载 jQuery 版本 1.x 而不是 2.x？ （如果你需要支持 IE8：微软甚至不再支持，所以你可能不需要）。
最后，如果我们不想加载脚本，但我们真的只想要它的内容，作为纯文本，*** 上已经只有一百万个答案告诉你如何做到这一点。使用 jQuery，那就是：
$.get("http://https://code.jquery.com/jquery-1.10.2.js", function(data)
$(document.body).append($("div").text(data));
);
但您已经知道这一点，因为在 *** 上已经被问过无数次，并且您记得在提问之前按照 how to ask 的说明搜索该网站，对吧？
【讨论】：
谢谢，但在页面上执行脚本不是我的目标！我想获取脚本内容并将其放在一个 div (USING JAVASCRIPT - NO XHR) 中，这可能吗？ @MahmoudGamal 你如何在没有 XHR 的情况下在远程服务器上获取脚本？ 如果需要获取文件内容，需要先获取文件，这需要设置XHR传输。想要使用“javascript，但没有 XHR”就像说你需要一辆可以快速行驶但没有***的汽车。您将需要 XHR，而 jQuery 获取文件内容的函数在幕后使用 XHR（答案已更新）【参考方案3】：使用这种方式，它可以解决你的问题。
$.get( "https://code.jquery.com/jquery-1.10.2.js", function( data )
alert(data);
);
【讨论】：
这会发送一个 XMLHttpRequest ，而不是解决方案！！【参考方案4】：你可以试试添加
<script src="http://code.jquery.com/jquery-1.8.3.min.js" ></script>
然后是 AJAX 调用，但它从 CACHE 中提取数据。它看起来像一个 AJAX，但是当添加 <script> 时，文件进入缓存，然后从 ajax 中的缓存中读取。如果它没有存储在缓存中，则使用普通 AJAX 读取它。
jQuery.cachedScript = function(url, options)
// Allow user to set any option except for dataType, cache, and url
options = $.extend(options || ,
dataType: "text",
cache: true,
url: url
);
// Use $.ajax() since it is more flexible than $.getScript
// Return the jqXHR object so we can chain callbacks
return jQuery.ajax(options);
;
$(document).on('ready', function()
// Usage
$.cachedScript("http://code.jquery.com/jquery-1.8.3.min.js").done(function(script, textStatus)
console.log(script);
);
);
正常解
如果您准备好使用 AJAX，请查看此fiddle
【讨论】：
【参考方案5】：在页面上执行脚本不是我的目标！我想得到 脚本内容并将其放在一个 div (USING JAVASCRIPT - NO XHR) 中，是吗 可能吗？
尝试使用<iframe> 元素
<div>
<iframe src="https://code.jquery.com/jquery-1.10.2.js">
</iframe>
</div>jsfiddle http://jsfiddle.net/snygv469/3/
【讨论】：
【参考方案6】：如何获取远程文件的内容并将其粘贴到您的文档中并执行 js 代码
我猜您希望将内容写入远程文件并希望将该内容写入您的 HTML。为此，您可以使用load() 函数。
要做到这一点，请按照以下步骤操作：
1.创建一个文件index.html，在里面写入如下代码：
<pre id="remote_script"></pre>
<script>
$(document).ready(function()
//var url = "https://code.jquery.com/jquery-1.10.2.js";
var url = "remote_script.html";/* For testing*/
$('#remote_script').load(url,function()
eval($('#remote_script').text()); /* to execute the code pasted in #remote_script*/
);
);
</script>
2. 创建另一个文件remote_script.html 用于测试，在其中写入alert('a');，不带任何<script> 标签并运行上述代码。
【讨论】：
以上是关于在一个div中写一个js脚本的主要内容，如果未能解决你的问题，请参考以下文章
使用 Python/GAE 动态生成 HTML div/JS 脚本
JS 脚本不适用于使用 jQuery 的 .load() 加载的 div