Форум PHP программистов > Работа с JS в динамически подгружаемом файле

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Работа с JS в динамически подгружаемом файле

Игорь_Vasinsky

26.08.2012 - 02:28

вообщем ситуация в 2х случаях сразу)

подгружаю с помощью плагина JQuery - страницу в которой есть JS, он ест-но не отрабатывает.

если бы я бы работал с контентом, то есть варианиы - как JS завести, но тут не подходить - так как в качастве аргумента url (или локальный путь) файла.

в файле может быть не только JS в чистом виде, но и подключённые файлы JS

Как то раз я уже победил один случай - нужно было подключить php как js скрипт, который расположен на стороннем сервере - сделал так:

в самом php

 header("content-type: application/x-javascript");

- собрал контент в буфер, почистил и экранировал

$content = addslashes(strtr($bufer, array("\r"=>' ', "\n"=>' ',PHP_EOL=>' ', '  '=>' ', '   '=>'')))

Подключал как JS

<script src="http:///site.ru/file.php?param=param"></script>

и всё работает и JS и PHP

но щас дело обстоит по другому, файл подгрухается аяксом (load() + плющечки, от того и целый плагин) - и соот-но номер не проканывает.

Кто сталкивался?

Спустя 43 минуты, 56 секунд (26.08.2012 - 02:12) Семён написал(а):

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

Спустя 11 минут, 19 секунд (26.08.2012 - 02:23) Игорь_Vasinsky написал(а):

прикольно

уже готовый плагин ср своим видом инициализации и вызова = 1 аргумент - pathto/file.html

Спустя 49 минут, 33 секунды (26.08.2012 - 03:13) Семён написал(а):

Лайкни меня полностью

Спустя 12 минут, 57 секунд (26.08.2012 - 03:25) Игорь_Vasinsky написал(а):

я вот о чём

$('.class').plugin( file);

Спустя 1 день, 8 часов, 34 минуты, 44 секунды (27.08.2012 - 12:00) bodja написал(а):

Цитата

Кто сталкивался?

Я сталкивался,геморная задача, хотя я понял для чего ты хочеш.
Сделай контейнер

var container=document.createElement('div');

запихни туда ,что получил аяксом

container.innerHTML=data;

потом вытягивай теги script
var scripts=container.getElementsByTagName('script');
далее сможеш выполнить через eval ,что находится здесь

eval(scripts[0].innerHTML);
eval(scripts[1].innerHTML);
// и т.д.

и\или загружать скрипты в динамике

var script=document.createElement('script');
script.src=scripts[0].src;
document.body.appendChild(script);

Я неуверен,что ты сможеш вытянуть атрибут src во всех браузерах ,не расположив контейнер в документе,но можеш попробовать без расположения и с ним.

ЗЫ Вообще подобный маневр ,меня заставил пересматривать архитектуру, дело в том ,что загружаемые скрипты в страницах потом никуда не деваются ,и если это не учитывать в страницах ,сайт быстро ляжет.
На мой взгляд ,лучше делать один двиг на клиенте и под его полным контролем грузить необходимые скрипты в динамике.

Спустя 3 минуты (27.08.2012 - 12:03) Игорь_Vasinsky написал(а):

я решил по другому: использовать iframe для выгрузки данных, а это обычное по суте окошко + имеет window.parent.

вопрос решён.

а такое решение слишком геморное.

Спустя 13 минут (27.08.2012 - 12:16) bodja написал(а):

Игорь_Vasinsky
Если тебе нужна работа в окошке ,а не во всем окружении ,тогда да.
У меня задача была немного хитрее.

Спустя 5 минут, 24 секунды (27.08.2012 - 12:22) sebastjan написал(а):

из всего понял что при необходимости подгружать нужный ЦСС+яваскрипт.!?
А что, такие большие объёмы?
Чего сразу не кинуть клиенту всё.?

Спустя 3 минуты, 20 секунд (27.08.2012 - 12:25) Игорь_Vasinsky написал(а):

bodja
нет. мне впринице нужна была работа с DOM, я просто перекидкой данных отмазался

из DOM в iframe
и вернул из iframe в DOM без всяких костылей. (т.е. с быстрым костылём

)

sebastjan
непонял

Спустя 5 минут, 53 секунды (27.08.2012 - 12:31) sergeiss написал(а):

Цитата (bodja @ 27.08.2012 - 14:16)

Если тебе нужна работа в окошке ,а не во всем окружении ,тогда да.

Так из ифрейма легко передаётся всё в основное окно. Всё, что надо передать, если уж точнее говорить. Изнутри ифрейма можем и скрипты JS выполнять (либо запусть уже загруженные в основном окне), менять CSS или другие свойства любого элемента основного окна.

Спустя 4 минуты, 26 секунд (27.08.2012 - 12:35) sebastjan написал(а):

Что то я совсем туплю

Объясни на пальцах что и зачем подгружаешь или с чем динамически работаешь.

Спустя 2 минуты, 58 секунд (27.08.2012 - 12:38) Игорь_Vasinsky написал(а):

sergeiss

Цитата

знутри ифрейма можем и скрипты JS выполнять

именно! вот этот момент меня полностью отвернул от темы

sebastjan

смотри.

я выполняю код и мне нужно ajax'ом загрузить в DOM файл, например html страничка с flash схемой концертного зала (указание мест и т.д.)

в этом html - также есть JS, но не тока кодом, но и подкючён файлами и даже с удалённого сервера.

так вот - ajax - то файл загрузит, но JS в файле работать не будет и консоль не покажет ни одной ошибки даже.

вот такая была ситуация.

Спустя 38 секунд (27.08.2012 - 12:39) sebastjan написал(а):

sergeiss
А разве сработает скрипт из ифрема в основном окне?
Дай ссылку на тему.

Спустя 3 минуты, 39 секунд (27.08.2012 - 12:43) sebastjan написал(а):

Игорь_Vasinsky
понял, спасибо.

Спустя 1 минута, 51 секунда (27.08.2012 - 12:44) Игорь_Vasinsky написал(а):

sebastjan
из фрейма к родительскому окну - легко через window.parent, а если к DOM родительского окна то window.parent.document.getElementById('id'), например.

Спустя 24 минуты, 7 секунд (27.08.2012 - 13:08) sergeiss написал(а):

Цитата (sebastjan @ 27.08.2012 - 14:39)

А разве сработает скрипт из ифрема в основном окне?
Дай ссылку на тему.

http://phpforum.ru/index.php?showtopic=62637&hl=

Не помню все детали, что мы там говорили...

Вот рабочий код, живой пример ифрейма, который я использую:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script language="javascript" type="text/javascript" src="./js/functions.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript"> 
getParentEl( 'user_action' ).options.length=2;
getParentEl( 'user_action' ).options[0].text='Статистика одного сектора';
getParentEl( 'user_action' ).options[0].value='act_cellid_stat';
getParentEl( 'user_action' ).options[1].text='Поиск секторов с данными MAFA';
getParentEl( 'user_action' ).options[1].value='act_cellid_mafa';
getParentEl( 'regid[]' ).disabled=false; 
getParentEl( 'lac_exact' ).disabled=false;
...тут еще много чего.... 
</script></body>
</html>

А функция getParentEl() вот такая:

function getParentEl( obj )
{
    return parent.document.getElementById( obj );    
}

На самом деле, можно всё и по-другому сделать. Указанных код (структура передачи данных) был сделан "на коленке", переделывать я не стал.

Ну и естественно, что указанные элементы уже имеются в родительском окне.

Спустя 1 минута, 13 секунд (27.08.2012 - 13:10) bodja написал(а):

Игорь_Vasinsky&sergeiss

Все эти изыскания закончаться тем ,что вы лесом пошлете HTML и CSS ,и перейдете полностью в DOM и AJAX и по взрослому будете этим крутить в динамике.
Вы сейчас мыслите через доступ к ифраме, и это неплохое решение... на этом этапе, а я через инкапсуляцию обьектов

Долго обьяснять,но я тоже начинал с того ,что мне требовалось грузить в динамике полноценные страницы со скриптами, кончилось тем,что функционал страниц превратился в обьекты , а их контент ,превратился в голые данные.Потом посмотрел на все это блядство, и думаю ... вот млять - это же все философия кода AS3

, теперь сижу перемалевываю все на AS3

Спустя 3 минуты, 55 секунд (27.08.2012 - 13:14) Игорь_Vasinsky написал(а):

bodja
да не, просто ситуация - когда сроки в приоритете над качеством

Спустя 31 секунда (27.08.2012 - 13:14) sergeiss написал(а):

bodja - с аяксом я тоже "побаловался".

Просто я как раз недавно "упражнялся" с ифреймом, с передачей полноценных окон с данными и с оформлением (по логике работы приложения это проще было, чем передавать аяксом). И тут понадобился асинхронный обмен данными. Естественно, я его сделал за 3 секунды на базе (скрытого) ифрейма.

Спустя 2 часа, 17 минут, 15 секунд (27.08.2012 - 15:31) bodja написал(а):

Игорь_Vasinsky&sergeiss
Давайте я вам дам задачку на будущее,что бы вы при следующем проекте смогли себя почуствовать крутыми перцами.
Итак, как правильные пацаны исходим из разделения , шаблон,код и данные(контент).
У нас есть шаблон(index.html), изменения и доработки в котором распостраняются сразу на все страницы.
У нас есть простейшие страницы- допустим десяток,где нет шаблона ,но они нужны для посковика и аякса для подгрузки страниц.Например такой вид

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<title>Статья 1</title>
<meta name="keywords" content="" >
<meta name="description" content="" >
<script src="./script.js" type="text/javascript"></script>
</head>
<body>
<h1>Статья 1</h1>
<div>Текст статьи,Текст статьи,Текст статьи,Текст статьи,</div>
</body>
</html>

И у нас есть некий код в script.js

И так задачка,выходя на любую из посковика страниц ,например domain.net/article1.html к ней должен быть подгружен шаблон index.html и содержимое этой страницы положено во внутрь шаблона + все обычные ссылки(для поисковика) шаблона и страницы должны быть переведены на вызовы функций аякса (любого, неважно) для подгрузки других страниц в дальнейшем через аякс.
Еще... Раз у нас DOM ,динамика и AJAX ,все это нужно сделать без ПХП :D :D :D
Вот собственно задачка "похитрее" :lol:

Спустя 3 часа, 43 минуты, 17 секунд (27.08.2012 - 19:15) sebastjan написал(а):

bodja
извени за глупый наверное вопрос.
Почему должны быть какие то изменения на внутренних страницах при изменении на индексе?
И не понимаю зачем использовать всю ХТМЛ раметку страницы которую надо динамически показать.
Хватит же по логике динамечиски подгрузить


<h1>Статья 1</h1>
<div>Текст статьи,Текст статьи,Текст статьи,Текст статьи,</div>

Или это требование для поисковиков?
И почему использовать весь аякс, когда можно только объект XMLHTTPRequest.
Помоги с разьяснением

Спустя 35 минут, 50 секунд (27.08.2012 - 19:50) sebastjan написал(а):

Кажется вкурил для чего отдельно ХТМЛ страницы.
Поправьте если я ошибаюсь.
Поисковики не индексируют страницы сгенерированные яваскрипт.
типа такой


<a  onClick="Fuction_load()>xxxxxxxxxxxxxxxxxxxx</a>

Спустя 9 минут, 15 секунд (27.08.2012 - 20:00) Игорь_Vasinsky написал(а):

ни чё не понял)

вообще не понял :D

типа формирование псевдо DOM, путём createElement() и appendChild() ???

какие ссылки, куда ссылки? чёж так всё запутано.

Ну вот эта функция подгрузит шаблон

function insertTemplaet()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
      xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.body.innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","index.html",true);
    xmlhttp.send();
}

но боту пофиг, у него не JS, он увидит пустой лист.

Ты про это? про createElement() и appendChild()

а всем понятно? или я один тугой?

Спустя 17 минут, 25 секунд (27.08.2012 - 20:17) sebastjan написал(а):

Игорь_Vasinsky
На мои посты не обращай внимание, я в этом новичок и поэтому пишу наверное лабуду.

Пока понял только одно, что страницы слепленные яваскрипт не видит поисковик.

Спустя 5 минут, 35 секунд (27.08.2012 - 20:23) Игорь_Vasinsky написал(а):

я читал) и я про это говорю.

вот я предложил

createElement() и appendChild()

как альтернатива innerHTML , но сдаётся мне - эффект тот же самый.

Спустя 30 минут, 34 секунды (27.08.2012 - 20:53) sebastjan написал(а):

Я пошёл опять копать NODE.JS как то это предпочтительней.

Спустя 9 минут, 45 секунд (27.08.2012 - 21:03) Игорь_Vasinsky написал(а):

а мне некогда) есть хостинг с нодой, а изучать некогда) блин.

Спустя 3 минуты, 24 секунды (27.08.2012 - 21:06) sharki написал(а):

тем, кто хочет с комфортом и без траты бабла и покодить на ноде, вот вам https://c9.io/ афигенски для начала, бесплатно для opensource проектов

Спустя 4 минуты, 36 секунд (27.08.2012 - 21:11) Игорь_Vasinsky написал(а):

у меняж акк на kodding.com там и нода и питон.

Спустя 7 минут, 42 секунды (27.08.2012 - 21:19) sebastjan написал(а):

sharki
Так и на винде нормально запускается сервер НОДе.
Я пока на винде пробую.
Но Игорь прав времени на это надо и не факт что это всё когда нибудь пригодится.
Только пока не могу понять про туже самую пресловутую индексацию поисковиками и НОДЕ.

Спустя 2 часа, 23 минуты, 4 секунды (27.08.2012 - 23:42) bodja написал(а):

Игорь_Vasinsky&sebastjan

Хорошо,попытаюсь обьяснить более понятно.
Например у нас есть обычный сайт на HTML с десятком страниц.
Понятно что каждая страница такого сайта повторяет шаблон.
Теперь задача,на одной странице сделать шаблон,с остальных его убрать ,оставить только "каркас" ХТМЛ с контентом для индексации поисковиком.
Когда посетитель заходит на эту страницу ,у нас этого шаблона нет,его нужно загрузить и развернуть на странице.
Когда мы его загрузили ,у нас имеются обычные ссылки в меню шаблона на другие страницы сайта, их нужно перевести на вызов функции аякса,что бы не сработала перезагрузка ,а сработал аякс.
Для чего нужен единый шаблон и аякс ,я думаю обьяснять не нужно.

Игорь_Vasinsky

Цитата

document.body.innerHTML=xmlhttp.responseText;

Ну все верно... почти

итого получилось

Цитата

Ну и чето невидать работающих скриптов шаблона и стилей

Вообще ожидал увидеть более развернутое решение ,а не стандартную функцию аякса.

sebastjan

Цитата

Почему должны быть какие то изменения на внутренних страницах при изменении на индексе?

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

Цитата

Пока понял только одно, что страницы слепленные яваскрипт не видит поисковик.

Они ему и не нужны,зачем поисковику шаблон?
Все что нужно для индексации ,мы ему уже подсунули.

Цитата

Поправьте если я ошибаюсь.
Поисковики не индексируют страницы сгенерированные яваскрипт.

Правильный вывод.

Игорь_Vasinsky

Цитата

createElement() и appendChild()

как альтернатива innerHTML , но сдаётся мне - эффект тот же самый.

Между createElement() и innerHTML ,такая же разница ,как между переменной и константой.
Эфект тотже ,но возможности разные.
createElement() вернет обьект,а innerHTML -ХТМЛ

Спустя 6 минут, 30 секунд (27.08.2012 - 23:48) Игорь_Vasinsky написал(а):

)) ну понятно., яж тока прицеливался

завтра покажу)

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

Быстрый ответ:

Здесь расположена полная версия этой страницы.