Change Iframe Attribute With Jquery September 29, 2023 Post a Comment I have something like so: <h2 id="solution_1">Solution 1: </h2><div class="answer-desc"><p>As Sarfraz already pointed out, the correct way to set the attribute for a jquery selector object is by using the <code>attr("attrName", "attrVal")</code>. The reason the <code>setAttribute</code> didn't work is something worth explaining, as I've hit my head against this point on more than one occasion:</p><p>When you use jquery's selector syntax, it returns an object -- defined in jquery -- which is essentially a list of all of the elements that the selector matched. Whether it matches one element (which should always be the case with an id selector) or more than one, the returned object is the element list, never a single DOM object (eg single element). <code>setAttribute</code> is a method for actual <code>HTMLElement</code> objects.</p><p>This is why</p><a name='more'></a><pre><code id="code_4" class="hljs language-javascript">$(<span class="hljs-string">"#frame"</span>)[<span class="hljs-number">0</span>].<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">"width"</span>, <span class="hljs-string">"200"</span>); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_4')">Copy</button></pre><p>works, but</p><pre><code id="code_5" class="hljs language-javascript">$(<span class="hljs-string">"#frame"</span>).<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">"width"</span>, <span class="hljs-string">"200"</span>); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_5')">Copy</button></pre><p>does not. The jquery element does not have that method, even though the <code>HTMLElement</code> objects in its list do.</p><p>If you wanted to (for whatever reason) use a native <code>HTMLElement</code> method (or a method common to the elements your selector returns, such as inputs, etc), you can use jquery's <code>each()</code> method, like so:</p><pre><code id="code_9" class="hljs language-javascript"><span class="hljs-comment">// Set all iframes to width of 250</span> $(<span class="hljs-string">"iframe"</span>).<span class="hljs-title function_">each</span>( <span class="hljs-keyword">function</span>(<span class="hljs-params">index, elem</span>) { elem.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">"width"</span>,<span class="hljs-string">"250"</span>); } ); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_9')">Copy</button></pre><p>The <code>each()</code> method's callback can be passed two optional parameters, the first being the index of the element in the selector list, the second being the actual DOM element, which you can call native DOM methods on.</p><p>Like I said, I've gotten really frustrated trying to figure out how to use jquery's selector results with native methods more than once, so I hope this helps clear up not only why <code>setAttribute()</code> doesn't work, but native methods in general, and how to actually get them to work when you can't find the jquery equivalent.</p></div><h2 id="solution_2">Solution 2: </h2><div class="answer-desc"><p>What about:</p><pre><code id="code_12" class="hljs language-javascript">$(<span class="hljs-string">'#frame'</span>).<span class="hljs-title function_">width</span>(x) </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_12')">Copy</button></pre><p>or </p><pre><code id="code_13" class="hljs language-javascript">$(<span class="hljs-string">'#frame'</span>).<span class="hljs-title function_">attr</span>(<span class="hljs-string">"width"</span>,<span class="hljs-string">"50"</span>); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_13')">Copy</button></pre></div><h2 id="solution_3">Solution 3: </h2><div class="answer-desc"><p>1) Using <a rel="nofollow noreferrer noopener" href="https://api.jquery.com/attr/"><code>attr</code></a>:</p><pre><code id="code_15" class="hljs language-javascript">$(<span class="hljs-string">"#frame"</span>).<span class="hljs-title function_">attr</span>(<span class="hljs-string">"width"</span>, <span class="hljs-string">"31"</span>); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_15')">Copy</button></pre><p>2) Using DOM object:</p><pre><code id="code_16" class="hljs language-javascript">$(<span class="hljs-string">"#frame"</span>)[<span class="hljs-number">0</span>].<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">"width"</span>, <span class="hljs-string">"50"</span>); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_16')">Copy</button></pre></div><h2 id="solution_4">Solution 4: </h2><div class="answer-desc"><pre><code id="code_17" class="hljs language-javascript">$(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>( <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) { <span class="hljs-keyword">var</span> ysr = $(<span class="hljs-string">'iframe'</span>).<span class="hljs-title function_">attr</span>(<span class="hljs-string">'src'</span>); <span class="hljs-keyword">var</span> nysr = ysr + <span class="hljs-string">"HD=1;rel=0;showinfo=0"</span>; $(<span class="hljs-string">'iframe'</span>).<span class="hljs-title function_">attr</span>(<span class="hljs-string">'src'</span>, nysr);}); </code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_17')">Copy</button></pre></div><h2 id="solution_5">Solution 5: </h2><div class="answer-desc"><p>Edit: Saw you do have id. Could you see if the code is actually running? Like is it being triggered? Also, try changing <code>allowfullscreen</code> to <code>allowfullscreen="true"</code></p></div> </div> <div id='baca-juga'></div> <script> //<![CDATA[ var bacaJugaJudul=[],bacaJugaNum=0,bacaJugaUrl=[];function bacaJuga(a){for(var u=0;u<a.feed.entry.length;u++){var e=a.feed.entry[u];bacaJugaJudul[bacaJugaNum]=e.title.$t;for(var l=0;l<e.link.length;l++)if("alternate"==e.link[l].rel){bacaJugaUrl[bacaJugaNum]=e.link[l].href,bacaJugaNum++;break}}}function showBacaJuga(a){function u(a,u){u.parentNode.insertBefore(a,u.nextSibling)}var e=document.querySelector("#baca-juga"),l=document.createElement("div"),t=document.querySelector(".post-body-artikel").querySelectorAll("div > br, span > br, div > p, span > p"),r=Math.ceil(.5*t.length),n=document.getElementById("related"),c=(l.setAttribute("class","baca-juga-wrap"),{bacaJuga:!0,jumlahBacaJuga:3,judulBacaJuga:"Baca Juga"});optionLinkMagz(c);if(!0===c.bacaJuga&&void 0!==t[r]){u(e,null!==n?n:t[r]);for(var g=0;g<bacaJugaUrl.length;g++)bacaJugaUrl[g]==a&&(bacaJugaUrl.splice(g,1),bacaJugaJudul.splice(g,1));var J=Math.floor((bacaJugaJudul.length-1)*Math.random()),g=0;if(0<bacaJugaJudul.length&&0<c.jumlahBacaJuga){e.appendChild(l);n=e;null!=(n=n.previousElementSibling)&&"BR"===n.tagName&&(n.style.display="none");for(var i="<strong>"+c.judulBacaJuga+"</strong><ul>";g<bacaJugaJudul.length&&g<c.jumlahBacaJuga;g++)i+='<li><a href="'+bacaJugaUrl[J]+'">'+bacaJugaJudul[J]+"</a></li>",J<bacaJugaJudul.length-1?J++:J=0;l.innerHTML=i+="</ul>"}}} //]]> </script> <script src='/feeds/posts/summary/-/Javascript?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script src='/feeds/posts/summary/-/Jquery?alt=json-in-script&callback=bacaJuga&max-results=5'></script> <script> showBacaJuga("https://kniteo.blogspot.com/2023/09/change-iframe-attribute-with-jquery.html"); </script> <div id='share-container'> <div class='share-title'> <p class='share-this-pleaseeeee'>Share</p> </div> <div id='share'> <a aria-label='facebook' class='facebook' href='//www.facebook.com/sharer.php?u=https://kniteo.blogspot.com/2023/09/change-iframe-attribute-with-jquery.html' rel='nofollow noreferrer' title='facebook'> <svg viewBox='0 0 24 24'> <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'></path> </svg> </a> <a aria-label='twitter' class='twitter' href='//twitter.com/intent/tweet?text=Change Iframe Attribute With Jquery&url=https://kniteo.blogspot.com/2023/09/change-iframe-attribute-with-jquery.html' rel='nofollow noreferrer' title='twitter'> <svg viewBox='0 0 24 24'> <path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'></path> </svg> </a> <a aria-label='pinterest' class='pinterest' href='//pinterest.com/pin/create/button/?url=https://kniteo.blogspot.com/2023/09/change-iframe-attribute-with-jquery.html&media=https://i.ytimg.com/vi/GiZGEFBGgKU/hqdefault.jpg&description=Change Iframe Attribute With Jquery' rel='nofollow noreferrer' title='pinterest'> <svg viewBox='0 0 24 24'> <path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'></path> </svg> </a> <a aria-label='whatsapp' class='whatsapp' href='//api.whatsapp.com/send?phone=&text=Change Iframe Attribute With Jquery%20%2D%20https://kniteo.blogspot.com/2023/09/change-iframe-attribute-with-jquery.html' rel='nofollow noreferrer' title='whatsapp'> <svg viewBox='0 0 24 24'> <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'></path> </svg> </a> <a aria-label='telegram' class='telegram' href='https://t.me/share/url?url=https://kniteo.blogspot.com/2023/09/change-iframe-attribute-with-jquery.html&text=Change Iframe Attribute With Jquery' rel='nofollow noreferrer' target='_blank' title='telegram'> <svg viewBox='0 0 24 24'> <path d='M19.4 3.717l-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42l10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001l-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15l4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z'></path> </svg> </a> </div> </div> <div id='ms-related-post'></div> <script> var postLabels = ["Javascript", "Jquery", ]; var relatedConfig = { postUrl: "https://kniteo.blogspot.com/2023/09/change-iframe-attribute-with-jquery.html", homePageUrl: "https://kniteo.blogspot.com/", relatedTitleText: "You may like these posts", }; </script> <div id='ms-matched-content'></div> <script> //<![CDATA[ // related post js from www.dte.web.id modified by sugeng.id !function(){var e,b={relatedTitleOuterOpen:'<div class="related-title"><p class="ms-title">',relatedTitleOuterClose:"</p></div>",relatedTitleText:"Artikel Terkait",thumbWidth:192,thumbHeight:108,imgBlank:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=",relatedOuter:"ms-related-post"};for(e in relatedConfig)"undefined"!=relatedConfig[e]&&(b[e]=relatedConfig[e]);function t(e){var t=document.createElement("script");t.src=e,document.getElementsByTagName("head")[0].appendChild(t)}function v(e){var t,l,a=e.length;if(0===a)return!1;for(;--a;)t=Math.floor(Math.random()*(a+1)),l=e[a],e[a]=e[t],e[t]=l;return e}var B={relatedPosts:!0,jumlahRelatedPosts:4,relatedPostsThumb:!0,judulRelatedPosts:b.relatedTitleText,relatedPostsNoThumbImg:"//1.bp.blogspot.com/-sLMytth04W8/XtoBMx9lUjI/AAAAAAAAHmM/zK-toM5XTacePvBHnpIO_tfzjg63BD3ZgCK4BGAsYHg/w192-h108-n-k-no-nu-rw/nomage%2B%25281%2529.png"},l=(optionLinkMagz(B),"object"==typeof postLabels&&0<postLabels.length?"/-/"+v(postLabels)[0]:"");l=l.replace("&","&"),msRelatedPosts=function(e){var t,l,a,s,r,d,o,n,i=b.relatedTitleOuterOpen+B.judulRelatedPosts+b.relatedTitleOuterClose,A=document.getElementById(b.relatedOuter),m=v(e.feed.entry);i+=1==B.relatedPostsThumb?'<ul class="ms-related-hasthumb">':'<ul class="ms-related-nothumb">';for(var u=0;u<m.length;u++)for(var h=0,c=m[u].link.length;h<c;h++)m[u].link[h].href==b.postUrl&&m.splice(u,1);if(0<m.length){for(var g=0;g<B.jumlahRelatedPosts&&g<m.length;g++){l=m[g].title.$t,void 0!==m[g].content&&(r=(s=m[g].content.$t).indexOf("<img",0));function f(e){a=e.replace(/.*?:\/\//g,"//").replace(/s72-(c|.*?-c)/,"w"+b.thumbWidth+"-h"+b.thumbHeight+"-c-rw")}"media$thumbnail"in m[g]?f(m[g].media$thumbnail.url):void 0!==r&&-1!==r?(d=s.indexOf("/>",r),o=(d=s.slice(r,d)).indexOf("src=",0)+5,n=d.indexOf('"',o),f(d.slice(o,n))):a=B.relatedPostsNoThumbImg;for(var p=0,c=m[g].link.length;p<c;p++)t="alternate"==m[g].link[p].rel?m[g].link[p].href:"#";i+='<li><a title="'+l+'" href="'+t+'">'+(1==B.relatedPostsThumb?'<div class="related-thumb-outer"><img alt="'+l+'" class="related-thumb" src="'+a+'" width="'+b.thumbWidth+'" height="'+b.thumbHeight+'"></div>':"")+('<div class="related-title-outer">'+l+"</div>")+"</a></li>"}1==B.relatedPosts&&(A.innerHTML=i+="</ul>")}},msRandomIndex=function(e){e=e.feed.openSearch$totalResults.$t-(B.jumlahRelatedPosts+1),e=1<e?1+Math.floor(Math.random()*e):1;t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/default"+l+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+(B.jumlahRelatedPosts+1)+"&callback=msRelatedPosts")},t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/summary"+l+"?alt=json-in-script&orderby=updated&max-results=0&callback=msRandomIndex")}(); function fullwidthImg(){var t=document.querySelector(".post-body img"),l=document.querySelector(".post-body > .tr-caption-container");l?l.classList.add("fullwidth"):t&&t.classList.add("fullwidth")}!function(){var t={fullwidthImage:!0};optionLinkMagz(t),1==t.fullwidthImage&&fullwidthImg()}(); //]]> </script> </div> <section class='comments comments-non-threaded embed' data-num-comments='0' id='comments'> <a name='comments'></a> <h2 class='comments-title'> Post a Comment for "Change Iframe Attribute With Jquery" </h2> <div id='Blog1_comments-block-wrapper'> </div> <div class='comment-footer'> <div class='comment-form default-comment-form'> <a name='comment-form'></a> <a aria-label='comment form' href='https://www.blogger.com/comment/frame/157702755891384361?po=4357796367855074543&hl=en&skin=contempo' id='comment-editor-src'></a> <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' title='comment-editor' width='100%'>