Можно ли загрузить Mootools в родительский фрейм, а затем повторно использовать его в iframes? - PullRequest
0 голосов
/ 14 июня 2011

Пример

- начало: index.html -
<!doctype html>
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<iframe src="iframe.html" id="innerFrame">blah</iframe>
</body>
</html>
- конец: index.html -

- начало: iframe.html -
<!doctype html>
<html>
<head>
<title>iFrame</title>
</head>
<body>
<form>
<input id="inputField" type="text" value="this is text." />
</form>
<script type="text/javascript">
$('inputField').set('value', 'updated text');
</script>
</body>
</html>
- конец: iframe.html -

В настоящее время $ ('inputField'). Set ('value', 'updated text'); не работает: - \

Ответы [ 3 ]

2 голосов
/ 18 июня 2011

Да, при условии, что iframe и его родительское окно находятся в одном домене, можно загрузить сценарии Mootools один раз в родительский, а затем программно расширить окно и документ IFrame вместо повторной загрузки сценария вIFrame.Как вы заметили, это не стандартное поведение, и, вероятно, по уважительной причине - я думаю, большинство людей скажут вам, что это больше проблем, чем стоит.

На самом деле, ярлык IFrameконструктор элемента раньше делал именно эту вещь, но в конечном счете это считалось слишком большим взломом и не стоило усилий, чтобы поддерживать его как часть долгосрочной структуры, поэтому они его отбросили - вот почему документация дляIFrame довольно странный (" Метод IFrame: конструктор, создает HTML-элемент IFrame и расширяет его окно и документ с помощью MooTools. ", а затем сразу после примера " Примечания: IFrameокно и документ не будут расширены с помощью методов MooTools.").

Итак, самый простой способ использовать $ (..) в вашем iframe - это просто включить iframe в скрипт Mootools.,Если вам кажется, что вы можете сделать так, чтобы родительское окно вставляло скрипт Mootools в заголовок iframe, например:

index.html

<html>
<head>
<title>Parent</title>   
<script type="text/javascript" src="mootools.js"></script>
</head> 
<body>

     <iframe id="innerFrame"></iframe>

<script type="text/javascript">
 var mooFrame = new IFrame("innerFrame", {      
    src:"iframe.html",
    events: {
        load: function(){

            var mooEl = new Element('script', {
                type: 'text/javascript',
                src: "mootools.js",
                events: {
                    load: function(){
                        //passed to mooFrame by the iframe
                        this.pageReady();

                    }.bind(this)

                }
            });             

            this.contentDocument.head.appendChild(mooEl);

        }           
    }       
});   
</script>
</body>
</html>

iframe.html

 <html>
 <head>
 <title>Iframe</title>   
 </head>
 <body>
 <div id="iframe_element"></div>

 <script type="text/javascript">
     parent.mooFrame.pageReady = function(){

         /* Put your iframe javascript in here */
     $('iframe_element').set("text", "Fancy!"); 

     };
  </script>
  </body>
  </html>

Обновление (29 июля): Я снова дурачился с этой идеей и понял, что есть довольно очевидный, хотя и довольно тупой способперенести функциональность Mootools, определенную в родительском окне index.html, во внутренний iframe: просто включите весь источник Mootools в родительское окно (удалите атрибут src из существующего элемента script и добавьте id) и скопируйте текст этого огромного элементав новый узел сценария, который вставляется в заголовок iframe.Таким образом, встраивание кода Mootools в элемент script дает вам доступ к содержимому элемента, которое вы не получаете, когда javascript загружается из внешнего файла через атрибут src.

Конечно,this..concept уместно только в том случае, если родительское окно и iframe находятся в одном домене (то же, что и код, приведенный выше).

Очевидным недостатком является то, что источник Mootools не кэшируется.Я не уверен, есть ли вариант использования, где этот метод был бы более оптимальным, чем просто включение mootools как в parent, так и в iframe.В любом случае измените файл index.html следующим образом:

<html>
<head>
<title>Parent</title>   
<script type="text/javascript" id="mootools_js">

**COPY-PASTE THE CONTENTS OF mootools-core.js HERE**

</script>
</head> 
<body>

     <iframe id="innerFrame"></iframe>

<script type="text/javascript">
 var mooFrame = new IFrame("innerFrame", {      
    src:"iframe.html",             
    events: {
        load: function(){
            var mooEl = new Element('script', {
                id: 'mootools_iframe_core',
                type: 'text/javascript',
                html:  $('mootools_js').innerHTML
            });

           this.contentDocument.head.appendChild(mooEl);
           this.pageReady();


        }           
    }       
});
</script>
</body>
</html>
0 голосов
/ 01 августа 2011

В моем предыдущем ответе предлагалось два альтернативных способа выполнения рассматриваемой задачи (« загрузить Mootools в родительский фрейм и затем повторно использовать его в iframes» ). Первый метод не «повторно использовал» функциональность Mootools, загруженную в родительский фрейм, но был скорее альтернативным способом загрузки скрипта во внутренний iframe. Второй метод был просто хакерским способом копирования сценария, поместив весь основной источник mootools в элемент скрипта, а затем скопировав содержимое этого элемента в элемент скрипта в голове iframe (вряд ли оптимально).

Этот следующий метод делает программным образом расширяет окно и документирует объекты внутреннего iframe. Опять же, предполагается, что родительская страница и iframe находятся в одном домене.

В моем (кратком и простом) тестировании при загрузке исходного кода как в родительском, так и в iframe было передано 72,1 КБ на скорости около 130 мс (чтобы завершить загрузку как родительских страниц, так и страниц iframe), в то время как страница, которая загружала исходный код и затем расширялась iframe был 36,8 КБ и занял около 85 мс для загрузки родительского и iframe. (это с gzip на сервере ... размер файла несжатого / unminified основного источника составляет около 134 КБ).

Для этого метода сделано несколько тривиальных дополнений / правок в ядре mootools. Загрузите несжатую версию mootools-core-1.3.2.js и переименуйте ее в «mootools-core-init.js» (или любую другую). В следующих шагах предполагается, что вы установили все флажки на странице основного сборщика, кроме «Включить совместимость».

Добавьте это в начало файла 'mootools-core-init.js' (над первой самозвонящей анонимной функцией):

var initMootoolsCore = function(){

var window = this;
var document = this.document;

Добавьте это в самый конец основного файла js:

};

initMootoolsCore.call(window);

Выполните следующие задачи поиска / замены:

1

  • Найти: })();
  • Заменить: }).call(this);

2

  • Найти: if (Browser.Element) Element.prototype = Browser.Element.prototype;
  • Заменить: if (this.Browser.Element) Element.prototype = this.Browser.Element.prototype;

3

  • Найти: var IFrame = new Type
  • Заменить: var IFrame = this.IFrame = new Type

4

  • Найти: var Cookie = new Class
  • Заменить: var Cookie = this.Cookie = new Class

( скачать | сжатая версия )

В родительском файле index.html поместите следующий элемент скрипта в заголовок

<script type="text/javascript" src="mootools-core-init.js"></script>

Наконец, в вашем файле iframe.html поместите следующий элемент встроенного сценария в заголовок, чтобы расширить окно и документ iframe (это должно быть перед любыми включенными или встроенными сценариями, которые должны использовать Mootools):

<script type="text/javascript">parent.initMootoolsCore.call(window);</script> 
0 голосов
/ 14 июня 2011

Нет, iframe.html является независимой страницей. Он не «наследует» ничего от предыдущей страницы.

...