HTML Widget + onload

1

For an HTML Widget I’m using “Specified URL” and everything is fine except it could take a little time to load the URL data in the iFrame.
All several devices and browers I’ve tested on, the onload on the iFrame works great except for the iPad Mini and iPod Touch that I have.

Can anyone else get onload for an iFrame using the HTML Widget to work?

2

The short answer is we probably can.

But without you supplying more information like what you are loading into the iframe, more specific detail on your setup and what is actually happening,what is not happening and what you expect to happen, I do not see how we can help you!.

Please help us help you by supplying more info. As to be honest my first thoughts on your post was to ignore it for lack of details.:speak_no_evil:

3

Sorry, I was looking for an attachment button.
Didn’t realize you can just drag and drop your zip file.

If you notice in the hype3 document I put in comments to show how to see if the onload function ever gets called.
I tested with Safari, Firefox on a Mac, IE on a RT device but for some odd reason the onload function I set never gets called on my iPad Mini or iPod (newer iPod).
iOS 10.3 was just released and I installed it on my iPad Mini.

onloadtest.zip (255.4 KB)

4

I have a ASUS Android device and it works on that as well.

5

I put in online as well.
This is the hidden content test, not the overwriting of the BODY.
http://www.digimixstudios.net/onloadtest.html

Again, except for the iPad Mini, all other browsers and devices I tested, the HTML content is hidden.

6

hi,

with ‘children[0]’ you expect to get the iframeelement¿
well, hypes documentstructur may not be equal on each device.

instead try a selector which’ll return the first existing element within a structure.

yourHypeElement.querySelector(‘iframe’)

3 Likes
7

I am not sure why the original addEvent is not working but suspect it is to do with the way the addEvent is structured for iOS device and security.

I had to change something to get it to work.

Firstly I put the iframe in a Rectangle element. Which makes it simpler for use to not have to dive down children.
<iframe id="HTMLWidgetId" frameborder="0" style="width:100%;height:100%;border:none" src="${resourcesFolderName}/index.html">…</iframe>

I then let the document find the iframe element. and change the add event to a type I know works.

	var iFrameName = "HTMLWidgetId";

	 function func()
 	{
 		var frameDocument = document.getElementById("HTMLWidgetId").contentDocument || document.getElementById("HTMLWidgetId").contentWindow.document;
	 
		frameDocument.body.innerHTML = "<h1>testing</h1>";
 console.log("here");
 	};
 	
 	
 	
 	var iframe = document.getElementById("HTMLWidgetId");

 
 		var userAddEventListener = true;
 		
 		if(true == userAddEventListener)
 		{
				iframe.addEventListener('load', function(event) {
    
	 func()
	
  });
		}
		else
		{
			iframe.onload = func();
		}

onloadtest 2.hype.zip (259.5 KB)

1 Like
8

Hah,

I forgot about that..duh. Good call @h_classen Hans.

ignore my post above

You will need to just change your lines that get the iframe to :

document.querySelector(iFrameName).querySelector('iframe')

and also for example

document.querySelector(iFrameName).querySelector('iframe').contentDocument

1 Like
9

For those that downloaded my hype3 document, I put in what Hans said and it’s working now.
Here’s what I updated the two lines as…

var frameDocument = hypeDocument.getElementById(iFrameName).querySelector(‘iframe’).contentDocument || hypeDocument.getElementById(iFrameName).querySelector(‘iframe’).contentWindow.document;

var iframe = hypeDocument.getElementById(iFrameName).querySelector(‘iframe’);

This is getting more of an opinion from you and Mark, but which is recommend to use
.addEventListener or .onload ?
I tired on all my devices as well as the iPad Mini and iPod and both work, but is there a preference?

Again, thanks Hans and Mark for your replies.

10

though a few years old … seems to be like good wine :wink:

1 Like
11

Thanks, interesting reading and I might have figured out an issue I was having regarding addEventListener where you can have several events added as oppose to onload where only one event can be added. For this project I’m doing, I’ll stick with onload.

Mark, FYI, addEvent is a IE thing.

12

AddEventListeners are not an "IE thing" just that they support IE from versions 9 above. addEvent is an "IE thing".

Using "onclick" is fine but make sure that if you ever add to the code in the future that if you use the same method for the same element elsewhere in your code then you will overwrite the previous one. :wink:

13

Sorry, I meant to type attachEvent not addEvent but then I realized that Mark was referencing addEvent, not attachEvent.
I had attachEvent in my code sample but wasn’t using it because it wasn’t defined and now I know why it wasn’t defined because it’s an IE only thing, that was when I ran my sample with Safari on the Mac…

And yes, I’m using onload for that purpose where I don’t want more that one event assigned, at least for this project I’m working on, maybe other projects I’ll look at addEventListener.

14

:wink: no worries

15

you’ll get to the point when working with several handlers for one element that you’ve got to track them …

var captureEvents = 
{
"eventHandlers" : {},
"addListener" : function (node, event, handler, capture) {
    if(!(node in captureEvents.eventHandlers)) {
        captureEvents.eventHandlers[node] = {};
    }
    if(!(event in captureEvents.eventHandlers[node])) {
        captureEvents.eventHandlers[node][event] = [];
    }
    captureEvents.eventHandlers[node][event].push([handler, capture]);
    node.addEventListener(event, handler, capture);
 },

"removeAllListeners" : function (node, event) {
    if(node in captureEvents.eventHandlers) {
        var handlers = captureEvents.eventHandlers[node];
        if(event in handlers) {
            var eventHandlers = handlers[event];
            for(var i = eventHandlers.length; i--;) {
                var handler = eventHandlers[i];
                node.removeEventListener(event, handler[0], handler[1]);
            }
        }
    }
}

}
	
	
	captureEvents.addListener(xxx, 'mouseover', doSthg, false);
	captureEvents.addListener(xxx, 'mouseover', doNext, false);
	captureEvents.addListener(xxx, 'mouseout', remove, false);


	
	function doSthg(e){
	console.log(e); 	
	}
	
	function doNext(e){
	console.log('doNext')
	}
	
	function remove(e){
	captureEvents.removeAllListeners(e.target, 'mouseover');
	captureEvents.removeAllListeners(e.target, 'mouseout');
	}
1 Like