在一个div中写一个js脚本答案

【问题标题】：Write a js script in a div在一个div中写一个js脚本
【发布时间】：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，你想做什么？你的问题不清楚。请详细说明。

标签： javascript jquery html

【解决方案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：微软甚至不再支持，所以你可能不需要）。

最后，如果我们不想加载脚本，但我们真的只想要它的内容，作为纯文本，Stackoverflow 上已经只有一百万个答案告诉你如何做到这一点。使用 jQuery，那就是：

$.get("http://https://code.jquery.com/jquery-1.10.2.js", function(data) {
  $(document.body).append($("div").text(data));
});

但您已经知道这一点，因为在 Stackoverflow 上已经被问过无数次，并且您记得在提问之前按照 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 width="500" height="250" 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> 标签并运行上述代码。

【讨论】：