Установите источник сценария из того же файла вместо другого?

Question

Я создаю iframe в файле и вставляю тег <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. Если вы хотите динамически находить и вводить этот код, читайте дальше.

Существует ровно два способа загрузить скрипт на страницу.

1. Добавить <script> с атрибутом src, указывающим на файл.

2. Создайте тег <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 
    } 
}); 

Теперь вы можете идти об извлечении содержимого этого фрагмента в одном из двух способов:

1. Знайте, с какой строкой он начинается.

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

2. Создайте регулярное выражение, чтобы определить, где начинается ваш код. Это довольно сложно и очень подвержено ошибкам, если ваш фрагмент нелегко отличить от другого кода.

   var snippet = contentsOfScript.match(/function mywidget.+/)[0]; 
   

Ни один из этих методов будет работать, если вы выполняете любую минификацию на вашем коде.