Как передать jQuery в eval'd код? - PullRequest
Новая
       3

Как передать jQuery в eval'd код?

2 голосов
/ 07 октября 2011

Сначала проверьте мою скрипку

jsFiddle хорош, но иногда он работает немного медленно, поэтому я сделал эту простую чистую JS-скрипку (можно запустить локально)

Пока отлично работает, но я хочу иметь возможность использовать jQuery в моей скрипке. Введите alert(typeof $); в левом нижнем поле и нажмите «Выполнить», чтобы увидеть, что я имею в виду (говорит неопределенный).

Так как мне передать jQuery в iframe и дать ему правильный контекст? Я подозреваю, что могу установить doc.contentWindow.$=$ или что-то в этом роде, но мне все еще нужно указать правильный контекст, чтобы он знал, где найти элементы. Как бы я это сделал? 

iframe.contentWindow.$ = $.proxy($,iframe.contentWindow);

Это тоже не сработало. Дает мне доступ к jQuery, но контекст по-прежнему неверен. 

iframe.contentWindow.$ = function(s){return $(s,doc);};

Такого рода работы ... но это что-то вроде хака.

Ответы [ 2 ]

1 голос
/ 07 октября 2011

Я немного подправил вашу скрипку: http://jsfiddle.net/gilly3/XcSYz/3/

Во-первых, вы не можете написать doctype для innerHTML тела и ожидать, что он что-то сделает для вас.То же самое с метатегом charset.Я перенес все это в document.write вызов.

Вы оценивали теги сценария на входе редакторов.Во-первых, это приводит к ошибкам, как сумасшедшим, если вы редактируете тег скрипта во фрейме html.Во-вторых, если вы поместите alert("hello") в тег скрипта на панели HTML, то при каждом нажатии клавиши вы получите предупреждение.В-третьих, вы оценивали сценарии в контексте родительского окна.Я изменил теги html-скрипта, которые будут оцениваться при нажатии кнопки run и с правильным контекстом.

Поскольку вы не хотите переписывать документ каждый раз (вы не можете, например, doctype), я изменилэто немного, чтобы сделать некоторые манипуляции с домом вместо этого.Он удаляет и заменяет тег стиля и записывает только содержимое HTML-панели в innerHTML тела.

Это забавный маленький проект, который вы пробуете.jsFiddle глючит и нуждается в некоторых обновлениях.Я не знаю, насколько жизнеспособна ваша чистая клиентская скрипка - jsFiddle довольно устойчив (несмотря на ошибки), но это хорошее упражнение, чтобы попробовать ваш подход.

Редактировать: Еще одно изменение, включенное в этой версии : я изменил ваши текстовые области, чтобы использовать width: 50%; height: 50%; вместо установки right и bottom.Те не работали должным образом в IE или FF.

1 голос
/ 07 октября 2011

Почему бы не сделать то, что делает сам jsfiddle? Он просто включает тег сценария для jQuery (или любого другого фреймворка, который вы запрашивали) в head из iframe.

Если вы посмотрите на head ... эээ "внешнего" iframe (созданного jsfiddle), вы увидите, что они просто добавили это туда: 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>

То же самое относится и к опциям "on ready" и "on load", jsfiddle просто оборачивает соответствующий вызов вокруг вашего javascript перед его внедрением в iframe.

Немного изменив свой код, вы можете создать элемент script: 

var doc = iframe.contentWindow.document;
var jqueryTag = doc.createElement('script');
jqueryTag.type = 'text/javascript';
jqueryTag.src = 'http://code.jquery.com/jquery-1.6.4.js';

и затем добавьте этот элемент к head.

...