How to add a GWT module to a dynamically created Iframe - javascript

What's the best way to handle this scenario ?
Code wise have I would like to have 2 seperate GWT modules. Modules as defined in this page
Download both modules in a single download, as a js file.
Run one of the modules in a dynamically created iframe.
Detailed description:
I have a GWT module called 'embed' which generates embed.nocache.js file.
I have another GWT module called 'widget' which generates widget.nocache.js file.
I add embed.nocache.js to my HTML page. This adds a link called 'widget' in the HTML page.
On click of this link, an iframe (say, widget.html) opens. widget.html has a link to widget.nocache.js. This file gets downloaded, gets executed in the iframe and puts a horizontal panel into the iframe.
Now I need to eliminate a seperate download of widget.nocache.js file.
Say I inherit 'widget' module in embed, it gets compiled and downloaded together. How do I initialise only the 'widget' related javascript in a dynamically created iframe ?
Can creating a custom linker help ?

Something like this. If you already have an IFrame on your page then just load it into that. The module will run fine so long as it isn't a Cross Site page and belongs to your own domain.
Document doc; // iframe document content
final String url_base = GWT.getHostPageBaseURL();
final Frame frame = new Frame(url_base + url_embedded); // your IFrame
frame.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
doc = IFrameElement.as(frame.getElement()).getContentDocument();
wrapIFrameContent(); // If you need to wrap any widgets
}
});
frame.setStyleName("css_style_name");
RootPanel.get("content").add(frame);
And that's basically it.
You can embed multiple pages too.
This is just an alternative to Window.Location.assign(url)
Wrap widgets from IFrame pages like this:
Button add_module = Button.wrap(doc.getElementById("addmodule")); // button
Element delem = doc.getElementById(id_events_div); // DIV element
events_div = DivElement.as(delem);
events_list = ListBox.wrap(doc.getElementById(id_event_list)); // ListBox

Related

Jquery/Javascript: How to Remove JS file for a page which is not being used in current page

Basically I have 4 views in my page (4 different sections in a single HTML page), I am hiding and showing the required views based on the button click.
I have 4 separate JS file for these 4 views. Based on the page user is in I am loading the JS page using the command
//Page1
if (current_page == 'Page1') {
$.getScript("/js/Page1.js");
}
I want to remove the all unused JS (JS which are used for other pages) when user navigates to 2nd page and only Page2.js should be loaded, Currently when user navigates to 2nd page (Page1 to Page2) both Page1.js and Page2.js are being loaded.
$.getScript can load the JS but is there a command or way to remove the JS from page and load the JS file dynamically?
Thanks for the response, I was able to figure out the issue and some workaround for that.
Basically I had some common functions in Page1 JS and Page2 JS so I wanted some of the functions in my Page2 JS not to run when I am using Page1 but they were getting executed because of them were using same modal and form submit IDs.
I declared a variable in the JS and Based on that I made sure the functions in Page2 JS not running when I am in Page1
var Page_Checker = "";
//Page1
if (current_page == 'Page1') {
$.getScript("/js/Page1.js");
Page_Checker = "THIS_IS_PAGE1"
}
Use the Page_Checker and make sure the functions are not running in other JS files.
May be you can do something like this in other JS files:
if(Page_Checker != "THIS_IS_PAGE1")
return;
Here's a good post that explains it, but hat you can do is remove the <script> element you are not using:
<script id="page1script" src="/js/Page1.js"></script>
And in jQuery:
if (current_page != 'Page1') {
$("#page1script").html().remove();
}

Use javascript (and jQuery and other libs) from parent document on iframe with several sources

good day all.
I'm working on a project in which there is an application that has one of its view implemented with an iframe, the iframe src is changed when the user clicks on some of the "parent" document. So basically there is always the same container, but the contents of the iframe will change according to the user choices.
let's say that there will be:
parent.html (which will have all the js logic)
child1.html
child2.html
...
each "child" page will be an html page with no (or very little) javascript. What I want to obtain is that when the user arrive on the child1.html, only the code that is global to every child is execute and of course also the code related to that page.
Let's say that on the child1.html there must be executed a couple of ajax calls, then some js to handle tables, and things like that. while on the child2.html there will be some forms whith their own validations, and another ajax call to send the forms (displayed on the child1.html).
There will be a big js library on parent.html that will contain the js code of every child page, so what I'd like to have is a way to "know" in which page I am and execute only the portion of code that is related to that page.
the structure should be something like:
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
});
}
and/or something on childpages that could execute only its code... like:
document.addEventListener("DOMContentLoaded", function(event) {
//execute only my part of the global js!
});
I hope to have been clear on what I'd like to obtain:
a parent page, with all the js used in childs, executed on demand OR with the capability to understand in which page we are.
several child page without or with a very little js.
Just for information, the iframe src will be changed by js on the parent page, by destroying the previous one and adding a new iframe with the new source.
If you want to keep all the Javascript in the parent page then you just really need a way to map the child pages to any code you wish to execute. This is a long way around doing something, but without further context it's difficult to suggest a more appropriate solution.
With that in mind, here's how I'd approach your problem.
First of all, I'd create an array of objects that defines what script to run for each child page...
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
}
}];
Don't destroy and recreate the iFrame every time you want to load a new page, or (if you really have to), assign an event handler to the load event every time. You only have to do this once if you never destroy the 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();
}
});
Obviously replace the selector #iframeId with something that will find your iframe.
In short, you create an array that holds each child page filename (prefix with / so you don't run scripts on pages that end with the same thing, but aren't the same page), and a function that you want to execute when that page loads. You then parse that array each time the iframe is loaded and execute all associated functions. Realistically you'll only have 1 init function per child page, but that code will handle multiple instances.

open page in iframe from other iframe

I have a mainscreen with 2 iframes. In iframe named (and also id) "leftmenu" I load frmLeftMenu.php and in the second iframe named (and also id) "appscreen" I load frmAppScreen.php.
In the frmLeftMenu.php I have a tree menu (dhtmlX) and on the onclick event I want to load a page in the iframe named "appscreen". The handling of the onclick is made in the frmLeftMenu.php.
What is the best way to do this?
I found the solutions. on the onclick I execute a function named DoOnclick. There I'm testing the id from the menu items and then execute a window.open("formname.php","appscreen"); This is working well for my application.
code example:
myTree.setOnClickHandler(DoOnclick);
function DoOnclick(id){
switch(myTree.getSelectedItemId()){
case 'adm_users' : window.open("frmUserMaintenance.php", "appscreen");
break;
}
};

jQuery Mobile DOM Page Reuse

I find that jQuery mobile is not reusing loaded pages.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if (activePage.hasClass("search-page")) {
var controller = activePage.data("controller");
if (!controller) {
controller = new SearchController(activePage);
activePage.data("controller", controller);
}
controller.loadPage();
}
});
Then later...
$.mobile.pageContainer.pagecontainer("change", "search.html");
which is an html document that contains
<div data-role="page" class="search-page">
However, upon each navigation to search.html, activatePage.data("controller") is null and so I reinitialize my SearchController.
I thought jQuery mobile reused pages already loaded into the DOM?
jQuery Mobile works with two distinct page template solution.
Multi opage - Where every page is part of a single HTML file
Multi HTML - Where single page is part of a single HTML file
You can of course mix those templates.
When jQuery Mobile is initialized for the first time initial HTML file is fully loaded into the DOM. This content will stay in the DOM until page is refreshed (or you remove it forcefully which is bad decision).
Every other HTML page will get loaded when you transition to it and it will get removed as soon as you transition from it. Basically it will stay alive in the DOM as long as is active.
So, in few words, only pages found in initial HTML file will permanently stay in the DOM, everything else will get loaded/removed as you activate it.

Getting the current iframe's body reference in JavaScript

I'm working on modal windows. When I click on a hyperlink in the main page, I need to show a modal window. This modal window I prepared using divs and one iframe. iFrame is used to show the source. Now in this modal window, I have another hyperlink to click which again opens a new modal window. This goes on.
Every time when I click on hyperlink, i want to create a new modal window in that provided iframe's src file itself. How to achieve this ?
TIA.
You can achieve this by using a simple java script file which creates div and iframe in your pages and frames. This script file will have all the necessary methods and a class to access these methods separately in each of the frame.
For example you can have the script file like
MyClass = function(){
this.var1, this.var2; // To store values separately in each frame.
this.myMethod = function(){
// Function body
}
}

Categories

Resources