PluginUs.Net - Business Tools for WooCommerce and WordPress

[realize your idea - make your dreams come true]

How to connect the site with in-built iframe

Sometimes developers should resolve the task - how to connect site which is in <iframe> tag and the parent site using JavaScript. And how for example refresh something instantly in <iframe> when something done in the parent site? That was the problem in the past, but not now as we can use HTML5 features. Lets look on the next example with <ul> items!

  1. So on the parent site we have <ul> and can identify it as '.providers_list li', and by logic of interface there is some js events which insert or deleted <li> from that <ul>. And in the site which is in <iframe> we want to get text of that links which are there.
  2. Create 1 js file on the parent site and 1 js file in the site which will be in-buit in the parent site by <iframe id="mdtf_csp_frame">
  3. Insert in parents js file next code:
  4. After page loaded we start setInterval function which each 2 seconds check providers list <a> and get text from each of that link
  5. Then using HTML5 function postMessage we will send collected data to <iframe>
  6. In the site which is in the tag <iframe> we should use next code:
  7. wpbdp-14 is textarea in site which is in tag <iframe> and in which we adding new information each 2 seconds from the parent site list '.providers_list li'.

That is all. The same principle you can use for another cases ...


WOOBE - WooCommerce Bulk Editor and Products Manager Professional