{"id":18557,"date":"2024-03-15T17:12:38","date_gmt":"2024-03-15T17:12:38","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/"},"modified":"2024-03-21T13:35:32","modified_gmt":"2024-03-21T13:35:32","slug":"how-to-pass-data-between-two-iframes","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/","title":{"rendered":"How to pass data between two iframes"},"content":{"rendered":"

There are several ways to pass data between two iframes.<\/p>\n

    \n
  1. Utilize the postMessage method: By using the postMessage method, data can be safely transferred between different iframes. One iframe can send data to another iframe using the postMessage method, and the receiving iframe can listen for and receive the data. You can send data from iframe A to iframe B using the following code:<\/li>\n
  2. Send data from iframe A to iframe B by using the postMessage method on the contentWindow of iframe B.<\/li>\n
  3. Then, in iframe B, listen for and receive data.<\/li>\n
  4. \/\/ Listen and receive data in iframe B
    \nwindow.addEventListener(‘message’, function(event) {
    \n if (event.origin !== ‘http:\/\/iframeA.com’) return; \/\/ Validate the message source
    \n console.log(‘Data from iframe A received: ‘, event.data);
    \n});<\/li>\n
  5. In the iframe receiving messages, you can access the data sent through event.data.<\/li>\n
  6. To utilize localStorage, it is a data storage mechanism provided by browsers that allows sharing of data between different iframes. One iframe can store data in localStorage, which can then be accessed by another iframe. Data can be stored in iframe A using the following code:<\/li>\n
  7. Store data in iframe A using localStorage with the message ‘Hello from iframe A!’.<\/li>\n
  8. Then read the data in iframe B.<\/li>\n
  9. Retrieve data in iframe B
    \nvar data = localStorage.getItem(‘data’);
    \nDisplay the data received from iframe A: console.log(‘Received data from iframe A: ‘, data);<\/li>\n
  10. Please be aware that when using localStorage, it is important to prioritize data security and implement proper cleanup mechanisms.<\/li>\n
  11. By using the window.parent object, if two iframes are from the same source (i.e. the same domain), you can directly access the parent window’s global variables and methods. One iframe can set variables in the parent window using the window.parent object, which can then be read by another iframe. It’s important to note that this method requires both iframes to be from the same domain.<\/li>\n
  12. Set the parent window variable in iframe A.<\/li>\n
  13. Set the parent window’s variable from iframe A to ‘Hello from iframe A!’<\/li>\n
  14. Then read this variable in iframe B.<\/li>\n
  15. Read the parent window’s variable in iframe B,
    \nvar data = window.parent.myData;
    \nconsole.log(‘Received data from iframe A: ‘, data);<\/li>\n
  16. Please note that this method is only applicable between iframes of the same origin and may result in naming conflicts with global variables.<\/li>\n<\/ol>\n

    These methods can be chosen based on the specific situation to transmit data effectively.<\/p>\n","protected":false},"excerpt":{"rendered":"

    There are several ways to pass data between two iframes. Utilize the postMessage method: By using the postMessage method, data can be safely transferred between different iframes. One iframe can send data to another iframe using the postMessage method, and the receiving iframe can listen for and receive the data. You can send data from […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-18557","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to pass data between two iframes - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to pass data between two iframes\" \/>\n<meta property=\"og:description\" content=\"There are several ways to pass data between two iframes. Utilize the postMessage method: By using the postMessage method, data can be safely transferred between different iframes. One iframe can send data to another iframe using the postMessage method, and the receiving iframe can listen for and receive the data. You can send data from […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T17:12:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T13:35:32+00:00\" \/>\n<meta name=\"author\" content=\"Ava Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ava Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/\"},\"author\":{\"name\":\"Ava Mitchell\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\"},\"headline\":\"How to pass data between two iframes\",\"datePublished\":\"2024-03-15T17:12:38+00:00\",\"dateModified\":\"2024-03-21T13:35:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/\"},\"wordCount\":414,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/\",\"name\":\"How to pass data between two iframes - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T17:12:38+00:00\",\"dateModified\":\"2024-03-21T13:35:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to pass data between two iframes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\",\"name\":\"Ava Mitchell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"caption\":\"Ava Mitchell\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to pass data between two iframes - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/","og_locale":"en_US","og_type":"article","og_title":"How to pass data between two iframes","og_description":"There are several ways to pass data between two iframes. Utilize the postMessage method: By using the postMessage method, data can be safely transferred between different iframes. One iframe can send data to another iframe using the postMessage method, and the receiving iframe can listen for and receive the data. You can send data from […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T17:12:38+00:00","article_modified_time":"2024-03-21T13:35:32+00:00","author":"Ava Mitchell","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Ava Mitchell","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/"},"author":{"name":"Ava Mitchell","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64"},"headline":"How to pass data between two iframes","datePublished":"2024-03-15T17:12:38+00:00","dateModified":"2024-03-21T13:35:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/"},"wordCount":414,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/","name":"How to pass data between two iframes - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T17:12:38+00:00","dateModified":"2024-03-21T13:35:32+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-pass-data-between-two-iframes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to pass data between two iframes"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64","name":"Ava Mitchell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","caption":"Ava Mitchell"},"url":"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/18557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=18557"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/18557\/revisions"}],"predecessor-version":[{"id":52246,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/18557\/revisions\/52246"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=18557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=18557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=18557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}