I have a Flex HTML component that is displaying content from a remote URL and a button in the Flex application that reloads the content. However, it takes a few seconds for the IFrame's content to refresh. During this time, there is no obvious feedback to the user that any action is underway.
I would like to clear the contents of the IFrame, so there is immediate feedback after clicking refresh, and then load the remote URL again. Is there a way to do this?
I've tried setting the HTMLText property to "" and setting the IFrame location to "about:blank", and neither of these have the desired immediate effect. (on it's own, setting the location to about:blank immediately clears the IFrame, but if it is followed by resetting the location to the original URL, the immediate clearing doesn't occur. Is this something to do with the IFrame caching the original page?)
One approach is to remove the component from the display list and add a new instantiated component back in its place.
This will assure fully initialized state.
One other way you could get around would be having a blank iframe or loading screen ready with the same size and same position, while the contents are being loaded, hide the content iframe, and show the blank iframe or loading screen. This could be much easier to achieve a more flexible result.
Related
Is there a way to prevent updates (painting) to a WebView and then re-enable them?
e.g.
disable painting
set new html content
re-enable painting
Why I'd like to do this
because my html is jumpy the elements will all be in the same positions on the HTML page after as before but during the update of the HTML they will move around a bit. Since I'm refreshing the HTML on a periodic basis, it is quite annoying to have it jump around often.
There is no real painting on/off switch either in WebView or in general for JavaFX (as far as I know), but perhaps the workaround below might help.
You could always:
snapshot the WebView, to create an image.
Replace the WebView with the snapshot image.
Set new html content.
Replace the snapshot image with the WebView.
To do this, you could put the snapshot image and the WebView in a StackPane, with the WebView on top and trigger setVisible(false) on the WebView when you want to hide it and set new html content and trigger setVisible(true) once you want the new content to be seen.
You might want to use some synchronization to know when the newly set html content has finished rendering either by a message from the JavaScript to Java or by monitoring the html events in Java (doing such is beyond the scope of this post). There might also be some issues with the WebView detecting it is not actually visible and then deciding to be lazy because of an optimization and not repaint itself for updated html content until it is made visible again (not sure I haven't tried it).
Anyway, perhaps give this technique a try and see if it works for you.
I have a long html page. At the bottom is an iframe with a long list of links. The links open new pages in the iframe.
When links are clicked inside the iframe, the parent page (as expected) jumps to the top and I have to scroll way back down to get back to the iframe and its newly loaded page.
Here's one hurdle. The iframe contents is hosted on another server outside my control. The admins there have graciously added a call to a js file hosted on our server from the iframe src, but I still can't crack this.
Do I need to calculate the distance of each link from its window top and also the iframe's distance from it's window top and do a bunch of math and then scroll back to that position after the new page loads?
Suggestions?
I've got a list of items which I load from an API, so when my page loads I send an AJAX request, update my scope with the data and my list HTML list is populated.
Now, there is no issue when I load the page directly, but when using UI router the following happens:
Navigating to page directly (reloading the browser) - everything works fine, the list is populated and I can scroll.
Navigate to the page via another state (using ui-sref), the list loads via AJAX, the HTML is updated. However I'm unable to scroll if the list breaks the window height.
I've currently got html, body { height: 100%; }, but changing any of these has no effect. Do I need to re-calutate the window height? Why would this only happen when I navigate to the page/state from another?
Can I force UI Router to re-calculate window height on each state load or similar?
On my website, I have a list of users. By clicking each one, a fancybox pop up window will show. Within the window, I use iframe to load a page with paintings from the user.
Is there any way to make the images in fancybox iframe pinable by clicking pinterest bookmark pin it button? Or do I have to add a pin it button to each HTML page?
Thanks,
Milo
The bookmarklet button works on the page that is currently loaded. Usually, if an iframe has changed even slightly from its original url, it is inaccessible to the parent page via javascript. The actual iframe itself has to initiate the appropriate messaging request systems.
If you can have the iframe send a message to the parent window that contains the desired images and then have the parent window add the image links to the page, that seems to be the only way to do it right now. Look into the postMessage() function.
As you asked if there is "any way" to do it, I would say yes. However, it is very ugly. Probably better to add pinit buttons to each image in the iframe. :)
In an accessible flex app, the user can navigate through the control by using the TAB key.
The flex app pops up on top of the html page aftert the user activate a particular link, and is loaded using swfobject.embedSWF.
It works well in most cases, but there are some instances where either or both these happen:
a) The flex app loads ok, the "flex focus" is set on the intro text label to read out loud, but pressing tab seems to still cycle through the links on the page behind. (Now Fixed, see Edit 2)
b) The focus worked well and pressing tab cycle through the controls ok, but after going through them it then tabs out of the flex app and onto the address bar.. it becomes a nightmare to even try to get back to the flex app without clicking on it.. which isn't exactly accessibility friendly.
Is there any way to prevent these from happening?
EDIT: The target browser is IE. Seems to be the most used with Jaws
EDIT: I managed to fix problem (a). The trick was to call focus on the swf object, but after a slight time out - must be something to do with flash/js ready state.
setTimeout(function(){
document.getElementById('swfobject').focus()
},25);
Problem (b) is still an issue though...
In your mx:Application component, add an event listener for the keyFocusChange and add this code :
protected function application1_keyFocusChangeHandler(event:FocusEvent):void
{
event.preventDefault();
focusManager.getNextFocusManagerComponent(event.shiftKey).setFocus();
}
b) Try to place some focusable element after swf in html. When focus leaves flex app, see if onfocus handler of that element gets called. If it is, you can refocus flex app from there or redirect it where you want.