Используйте javascript (и jQuery и другие библиотеки) из исходного документа на iframe с несколькими источниками

Question

хороший день все.

Я работаю над проектом, в котором есть приложение, которое имеет одно из его представлений, реализованное с помощью iframe, iframe src изменяется, когда пользователь нажимает на какой-либо «родительский» документ. Таким образом, в основном всегда есть один и тот же контейнер, но содержимое iframe будет меняться в соответствии с выбором пользователя. скажем, что там будет:

parent.html (который будет иметь всю логику JS)

child1.html

child2.html

...

каждый Страница «child» будет html-страницей без (или очень маленького) javascript. То, что я хочу получить, заключается в том, что когда пользователь приходит на child1.html, выполняется только код, который является глобальным для каждого дочернего элемента, и, конечно же, код, связанный с этой страницей. Предположим, что на child1.html должно быть выполнено несколько вызовов ajax, затем некоторые js для обработки таблиц и тому подобное. в то время как на child2.html будут какие-то формы с их собственными валидациями и еще один вызов ajax для отправки форм (отображается на child1.html).

Будет создана большая библиотека js на parent.html, которая будет содержать код js для каждой дочерней страницы, поэтому то, что я хотел бы иметь, - это способ «знать» на моей странице и выполнять только часть кода, связанная с этой страницей.

структура должна быть что-то вроде:

var myGlobalObject = {username:undefined,foo:1} 

if(childpage1.html){ 
    if (myGlobalObject.username == undefined){ 
    $.ajax(retrieve username); 
    $("#someTableIniFrame",iframeContext).doSomething(); 
    } 
} 
if(childpage2.html){ 
$("body",iframeContext2).on("submit","#someFormOnChild2", function(){ 
    //do something 
}); 
} 

и/или что-то на childpages, что может выполнить только свой код ... как:

document.addEventListener("DOMContentLoaded", function(event) { 
    //execute only my part of the global js! 
}); 

Я надеюсь, что было ясно, на что Я хотел бы получить:

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

несколько дочерних страниц без или с очень маленькими js.

Для информации, iframe src будет изменен js на родительской странице, уничтожив предыдущую и добавив новый iframe с новым источником.

Answer 1

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

Имея это в виду, вот как я подхожу к вашей проблеме.

Прежде всего, я бы создать массив объектов, который определяет, что скрипт для запуска для каждого ребенка страницы ...

var childScripts = [{ 
    "src": "childpage1.html", 
    "init": function() { 
     // what to do when childpage1 is loaded 
    } 
}, 
{ 
    "src": "childpage2.html", 
    "init": function() { 
     // what to do when childpage2 is loaded 
    } 
}]; 

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

$("#iframeId").on("load", function() { 
    var scriptInfo = childScripts.filter(function(childInfo) { 
     return window.location.href.slice(-childInfo.src.length) === childInfo.src; 
    }); 

    for (var i in scriptInfo) { 
     scriptInfo[i].init(); 
    } 
}); 

Очевидно заменить селектор #iframeId с чем-то, что будет найти свой IFRAME.

Короче говоря, вы создаете массив, содержащий каждое имя дочерней страницы (префикс с /, поэтому вы не запускаете скрипты на страницах, которые заканчиваются тем же, но не являются одной и той же страницей) и функцию, которая вы хотите выполнить, когда эта страница загружается. Затем вы разбираете этот массив каждый раз при загрузке iframe и выполняете все связанные функции. Реально у вас будет только одна функция init на одну дочернюю страницу, но этот код будет обрабатывать несколько экземпляров.