We initially had a web page that had HTML pull-down menus and an Applet. Each of these pull-down menus triggers a javascript function which calls an applet function. The applet also invokes a javascript function to enable/disable the pull-down menus.
Problem is that the HTML pull-down menus are getting cut off by applet because most browsers ignore the z-index for applets. The only solution I found was to place the Applet into an iFrame.
Now all javascript calls to the applet that were getting triggered by the HTML pull-down are broken. Javascript invoked by Applet is now broken.
All javascript functions are stored in one big javascript file loaded in the parent window.
I been doing something like this but it will be a lot of work and will make maintenance to difficult:
var appletIFRAME= document.getElementById('appletIFRAME').contentWindow;
appletIFRAME.executeAction1= executeAction1;
appletIFRAME.executeAction2= executeAction2;
...
...
This works ok but I believe I will also need to create wrapper javascript functions on both the parent window and the IFRAME web page. Also, our javascript functions are using jQuery to access HTML pull-down elements by ID's, which will also need to be refactored out. This will be too much work.
So is there an easier way to call javascript between parent window and IFRAME? I want to avoid doing all this function mapping between parent window and iframe object. All javascript functions are stored in one javascript file loaded in parent window.
Just want to add that the HTML pull-down menus are located in parent window and Applet in the iFrame. This is the only way the pull-down menus will not get cut off by Applet.
Thanks in advance.
Related
If I develop a Javascript widget that others can embed directly into their page without using an iFrame, is it somehow possible to prevent Javascript access to DOM-elements of the widget from the embedding page?
Suppose the widget is an image gallery and the embedding website selects all images via Javascript and changes both CSS attributes and any click handlers. How can I prevent the functionality or appearance of the widget from being changed without using an iFrame? I imagine this as a kind of firewall that allows/blocks Javascript access by DOM-source and destination.
The perfect solution is Shadow Dom
I am trying to build a content editor. This contenteditor will load a HTML document (with JavaScript) into for example a #result element. The problem with this, is that if inside this HTML element there is for example $("input").hide();, then all of my inputs are gone throughout the whole page, so not just inside the loaded HTML (my goal).
What I want to do with the editor is when a client clicks on an element that represents something in the database, the info of this element will popup and the user will be able to edit this. (So, if a user hovers over a form with the class "contact-form" (which is in the database, connected to the loaded page) a new window will popup with information about this specific form element.
Also, I cannot completely disable Javascript, since the loaded HTML might contain Javascript for styling etc.
My goal: Remove Javascript, that can be annoying when a user loads in an HTML file. Like an alert(); Also, remove the ability for the Javascript to edit somehthing outside it's own DOM.
P.S. I am open to better workarounds like using an iframe for this, BUT I want to be able to hover over elements in interact with them.
Edit: It seems that this question might be a bit too broad, looking at the comments. Summary of my question: How can I disable alert() for a specific div and how can I create a sandbox so that code inside a div, can only change elements from inside that div.
What you're looking for is HTML sanitization. This is the process by which you remove any dangerous content from a snippet of HTML on the server, before it's loaded in the browser. There are plenty of sanitization libraries out there that can strip script tags, object tags, etc. Just remember, you can't sanitize using javascript because by the time you've injected your script, another malicious script may have already loaded and run.
The only way to effectively sandbox a javascript environment is with iframes. You'll notice that websites like CodePen, JSBin and JSFiddle use them extensively. There's something called the ShadowDOM, which is the basis of Web Components, but it isn't very well supported yet.
To make it possible to run your own frontend scripts that allow for hovering, you can inject your script after your sanitization process. This way, if it's loaded inside an iframe your script will also be loaded.
Finally, alert() doesn't belong to any elements on the DOM. You can trigger an alert as soon as the page loads, for example. However, if you're trying to prevent alerts from popping up on user interactions, you could try removing all event listeners from a particular element. This won't be necessary if you sanitize the HTML of script tags, however, since the script wouldn't have had a chance to load so there won't be any event listeners.
You can use ShadowDOM to load an html document into a host node. See also WHY SHADOW DOM?
Im working on a company website that has it's own cms. We don't have access to the server config/ftp and I can not run server-side files, only html/css/js.
I was trying to include the menu using jquery.load() function to make my life easier when my client asks to change some menu item. (The site has more than 20 pages).
The problem is: when I use jquery.load() function, the menu doesn't work properly (it's a menu with slide effect on mouseover) because part of the code is only in the DOM (I guess that's the problem). Is there any other way to include the html and keep the menu working?
This sounds like the events aren't bound since you're loading dynamic content. You'll need to use delegated events so that they still work for dynamically loaded content.
Just used the callback of the load function to call the events of the menu.
Works like a charm!
Is it possible to create dynamically addressed LIKE button in XUL ?
Need to place it on XUL OVERLAY toolbar.
My idea is about IFRAME addressing like_button.html in chrome:// and changing src param inside. But there is javascript interaction with button, which can be problem, isn't it?
Thanks
as far as I know there won't be any problem in changing the parameters inside or outside using JavaScript and XUL. Using DOM you can manipulate anything & you can create any elements dynamically in XUL JavaScript.
https://developer.mozilla.org/en/Dynamically_modifying_XUL-based_user_interface
https://developer.mozilla.org/en/XUL_Tutorial/Document_Object_Model
https://developer.mozilla.org/en/XUL_Tutorial/Modifying_a_XUL_Interface
http://mb.eschew.org/15
These links will be more helpful for you to go on!!!!
Are all popups the same when it comes to referencing the parent pages js variables/methods etc?
How about ajax requests from within the popup's content?
From what i understand a popup is just playing with the Z-order, so its basically still on the parents page just looks 'higher' right?
Most likely you're talking about a popup being a div (or other element) being displayed when an action occurs. this is done by having some sort of hidden element on the page that just gets displayed and maybe centered, then brought to the front (using the z-index).
if this is how you're using popup's with javascript then yes, all javascript that's on the page is accessible to the popup.
You will have to be cognizant of cross-domain scripting. However, for the simplest cases, you should be able to reference javascript on the parent page with:
if (window.parent)
{
window.parent.SomeFunctionOnParent();
}
Javascript popups are independent windows but they can refer to their owner via: window.owner