Question

我在文件中创建iframe并插入<script>标记作为其内容。 Script src是从名为test.js的其他文件加载的。以下是它的完成方式：

var scriptElement = document.querySelector("#your-widget");
var iframe = document.createElement("iframe");
scriptElement.parentNode.insertBefore(iframe, scriptElement.nextSibling);

var script = document.createElement("script"); 
iframe.contentWindow.document.appendChild(script); 
script.src = "http://www.example.com/test.js";

我没有从http://www.example.com/test.js加载脚本的内容，而是想从上面代码所在的同一个文件中获取它。这就是：

var scriptElement = document.querySelector("#your-widget");
var iframe = document.createElement("iframe");
scriptElement.parentNode.insertBefore(iframe, scriptElement.nextSibling);

var script = document.createElement("script"); 
iframe.contentWindow.document.appendChild(script); 
script.src = // ????

// the following JavaScript code should be placed inside the script
function mywidget() {
  // some code
  return true;
}
mywidget.succeeded = mywidget();

如何从同一个文件而不是另一个文件中设置脚本来源？

Answer 1

如果您只是想将这个精确的代码段放在脚本代码中，则可以使用.innerText执行此操作。

script.innerText = 'function mywidget() { ...';

然后它会在插入DOM时执行。如果您想动态查找并注入该代码，请继续阅读。

有两种方法可以在页面上加载脚本。

添加<script>，src属性指向文件。

创建一个<script>标记，然后将内容设置为您要执行的任何内容。

var script = document.createElement('script');
script.innerText = 'console.log("Hello, World!")';
document.body.appendChild(script);

如果要提取部分脚本并使用这些内容，那么您可以做的最好的事情是通过ajax加载内容并使用方法2注入它。

假设你有jQuery（为了简单的AJAX工作）：

$.ajax({
  url: 'path/to/script.js',
  dataType: 'text', // make sure it doesn't get eval'd
  success: function(contentsOfScript) {
    // Refer to method 2
  }
});

现在，您可以通过以下两种方式之一来提取该代码段的内容：

确切知道它从哪一行开始。

var lines = contentsOfScript.split('\n');
var snippet = lines.slice(lineNumber + 1); // adjust for 0 indexing

生成正则表达式以标识代码的开始位置。如果您的代码段不容易与其他代码区分开来，那么这非常棘手并且非常容易出错。
```
var snippet = contentsOfScript.match(/function mywidget.+/)[0];
```

如果对代码执行任何缩小操作，这些方法都不会起作用。

从同一个文件而不是另一个文件设置脚本源？

1 个答案: