{"id":721,"date":"2017-10-09T22:33:28","date_gmt":"2017-10-10T03:33:28","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=721"},"modified":"2021-01-07T23:20:37","modified_gmt":"2021-01-08T04:20:37","slug":"wordpress-how-to-create-an-iframe-refresh-button","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/09\/wordpress-how-to-create-an-iframe-refresh-button\/","title":{"rendered":"WordPress: How to create an iframe refresh button"},"content":{"rendered":"\n<p>Let&#8217;s say you have an interactive canvas loaded in an iframe and you want to have the ability to &#8220;clear&#8221; the canvas without reloading the entire page. This example was created using p5.js and the html was loaded into an iframe. After drawing on this canvas, it can be cleared by clicking the &#8220;Clear Canvas&#8221; button below.<\/p>\n\n\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" name=\"square_canvas\" src=\"https:\/\/bluegalaxy.info\/processing\/p5\/square_canvas\/\" scrolling=\"no\" width=\"640\" height=\"400\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n\n\n\n<p><\/p>\n\n\n\n<p><button class=\"btn\" onclick=\"refreshIframe('square_canvas');\">Clear Canvas<\/button><\/p>\n\n\n\n<p><br><p><script language=\"JavaScript\">&lt;br \/> function refreshIframe(name) {&lt;br \/>     var ifr = document.getElementsByName(name)[0];&lt;br \/>     ifr.src = ifr.src;&lt;br \/> }&lt;br \/> <\/script><\/p><\/p>\n\n\n\n<script language=\"JavaScript\">\nfunction refreshIframe(name) {\n    var ifr = document.getElementsByName(name)[0];\n    ifr.src = ifr.src;\n}\n<\/script>\n\n\n\n<p>The separate parts that make this work are:<\/p>\n\n\n\n<p>1. Load the canvas into an iframe. Notice the <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">name=\"square_canvas\"<\/code>. This ties the name given to the iframe to the name of the page element used in the JavaScript function described in steps 2 and 3. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">[ iframe name=\"square_canvas\" src=\"https:\/\/bluegalaxy.info\/processing\/p5\/square_canvas\/\" scrolling=\"no\" width=\"640\" height=\"400\" id=\"iframe_drop_shadow\" ]<\/pre>\n\n\n\n<p>2. Add JavaScript to the body of the post. This JavaScript code consists of a single function that will clear the iframe canvas.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script language=\"JavaScript\">\nfunction refreshIframe(name) {\n    var ifr = document.getElementsByName(name)[0];\n    ifr.src = ifr.src;\n}\n&lt;\/script><\/pre>\n\n\n\n<p>3. Create the &#8220;Clear Canvas&#8221; button. Notice the <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">class=\"btn\"<\/code>. Also, pass the name of the iframe &#8220;square_canvas&#8221; to the refreshIframe() JavaScript function via onClick.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button class=\"btn\" onclick=\"refreshIframe('square_canvas');\">Clear Canvas&lt;\/button><\/pre>\n\n\n\n<p>4. Add custom CSS to the WordPress theme. This is the CSS for the button class &#8220;btn&#8221;. For details about how to add custom CSS, see <a href=\"http:\/\/bluegalaxy.info\/codewalk\/2017\/10\/09\/wordpress-use-css-to-create-borders-around-an-iframe\/\">this post<\/a>. Here is the CSS that was used to create the &#8220;Clear Canvas&#8221; button:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.btn {\n  -webkit-border-radius: 8;\n  -moz-border-radius: 8;\n  border-radius: 8px;\n  -webkit-box-shadow: 0px 2px 5px #666666;\n  -moz-box-shadow: 0px 2px 5px #666666;\n  box-shadow: 0px 2px 5px #666666;\n  font-family: Arial;\n  color: #ffffff;\n  font-size: 14px;\n  background: #0369ad;\n  padding: 7px 15px 7px 15px;\n  text-decoration: none;\n}\n\n.btn:hover {\n  background: #299be6;\n  text-decoration: none;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s say you have an interactive canvas loaded in an iframe and you want to have the ability to &#8220;clear&#8221; the canvas without reloading the entire page. This example was created using p5.js and the html was loaded into an iframe. After drawing on this canvas, it can be cleared by clicking the &#8220;Clear Canvas&#8221; &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/09\/wordpress-how-to-create-an-iframe-refresh-button\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">WordPress: How to create an iframe refresh button<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[10,42,45,48,9],"class_list":["post-721","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-css","tag-iframe","tag-javascript","tag-p5-js","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=721"}],"version-history":[{"count":20,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/721\/revisions"}],"predecessor-version":[{"id":3310,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/721\/revisions\/3310"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}