ArtDialog component and iframe

Background

Component official website. You can learn more about unused users first.

When the Content parameter passes html elements, the official explanation is:

Note: 1. The elements are not copied but completely moved to the dialog box. Therefore, the original events and attributes are retained. 2. If the hidden elements are imported to the dialog box, the display is set: the block attribute shows this element. 3. When the dialog box is closed, the element is restored to its original position on the page, and the style display attribute is also restored.

If the element is the page itself and the final carrier displayed is the page itself, there is no problem. However, when iframe is used, a strange problem occurs,When the element is iframe, the frame will be reloaded once in chrome.

Symptom

First look at the top.html code.

There is an input box on the child1 page, and the reload will be displayed each time it is loaded. You can enter a button in it. After clicking the button, the IE (IE8 on the local machine) is normal and the input value is not lost. In Chrome, the frame is reloaded once, leading to loss of input values.

The problem is that there is a problem with the init event. Init is a function that will be executed after the dialog box pops up. We hope to load the data of the frame after a frame is popped up, And the init function cannot function at this time. Since iframe reload causes this problem, the init execution time should be to call the init event after the frame is loaded. By searching, find the code that is compatible with various browsers to listen to iframe after loading:

 thisFrame.onload = thisFrame.onreadystatechange =  (.readyState && .readyState != 'complete') = _top.frames[config.content.name].onreadystatechange =                 };

So the event I modified init is:

(webkit){  thisFrame.onload = thisFrame.onreadystatechange =  (.readyState && .readyState != 'complete') = _top.frames[config.content.name].onreadystatechange = }

The problem is basically solved here.

Further Processing

First, explain why frame is used.

The dialog box needs to be crossed. For example, top.html on the main page, a frame is used to display specific content. A content page needs to pop up the details dialog box for data, which is at the top of the dialog box, so the traversal mechanism provided by artDialog can be used to directly display elements at the top of the top page. However, the artDialog method is to completely move the elements, so if it is a common div, this div references a lot of js. After the traversal, a problem will occur, and the corresponding event will prompt the lack of js.

Of course, if you copy all the js or css required by this div to the top page, there is no problem, but this is definitely not good. So I used iframe, and the relevant js and css are inside the frame, so there is no js or css problem after traversal.

This also leads to my own needs,It is expected that the init event will be loaded smoothly when the traversal dialog box is displayed and the element is frame..

Although the above preliminary solution achieves the goal, it will be a bit depressing if it is written in every call place. Therefore, I have rewritten the through Method in the iframeTools. js file and made such a judgment. Please refer:

    artDialog.through = _proxyDialog =  config = arguments[0         (config.init && config.content.tagName && config.content.tagName == 'IFRAME' && tmpfn =0].init =  thisFrame == thisFrame.onreadystatechange =  (.readyState && .readyState != 'complete') = _top.frames[config.content.name].onreadystatechange =  api = _topDialog.apply(                         (_top !== window) artDialog.list[api.config.id] =

The Code adds a judgment. If through defines init, content is frame, and under the core webkit browser, the init method is loaded with a layer of listening frame.

 

　　Finally, I wonder why the frame element is reloaded in chrome when artDialog pops up. If you want to use artDialog, please let me know. Thank you!

Test code