Documentation

IFrame

API Reference

Overview

Ui-related IFrame is a component that helps include an i-frame, or 'inline frame' into the page. Basically, it's a floating frame on the webpage that contains an external web document. The component, as a rule, is smaller than the page it's added into, so vertical and horizontal scrollbars appear.

You can insert more than one IFrame into the view provided that you initialize a switching control for them.

The component inherits from view.



Initialization

webix.ui({ 
    view:"iframe", id:"frame-body", src:"data/pageA.html"
});

Related sample:  IFrame

  • src (path) - defines external site url.

Working with IFrame

Data loading

The url to show in the iFrame can be defined

  • as value of the src property (shown above);
  • as parameter of the load method.
$$("frame-body").load("http://google.com")

Switching between iframes in a single view

Simply put, this is the basics of multiview functionality.

Make use of any of the integral buttons (segmented, tabs or tabbar) to enable switching. The values for button options will be necessary URL-s.

{ view:"segmented", id:"control", options:[
    { id:"data/pageA.html", value:"pageA"},
    { id:"data/pageB.html", value:"pageB"}
]}

Then, attach a switching function to the button. The event referring to a tab mouse click is called "onAfterTabClick".

$$("control").attachEvent("onAfterTabClick",function(sid){
    $$('frame-body').define("src", sid);
});

The event fires on clicking any tab, takes its ID (sid) as parameter and sets the source for external webpage equal to this ID.

Related Articles

Back to top