Using to add one HTML page to another, how to give effects on first page</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2013-04-29T04:12:32.833" class="fromnow">Apr 29 '13 at 04:12</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2015-01-09T22:33:16.097" datetime="2015-01-09T22:33:16.097">Jan 09 '15 at 22:33</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 166 times"> <span class="fc-light mr2">Viewed</span> 166 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="16271089" data-ownerid="1696846" data-score="2"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="16271089"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I use <code><iframe></code> within another page.</p> <p>How can I give effects to the controls of first HTML page <em>id's</em> or <em>classes</em>, while accessing it from a second page?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jan 09 '15 at 22:33">edited Jan 09 '15 at 22:33</time> <a href="../../users/1744702/roope-hakulinen" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1744702.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Roope Hakulinen" /> </a> <div class="s-user-card--info"> <a href="../../users/1744702/roope-hakulinen" class="s-user-card--link">Roope Hakulinen</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,326</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="43 silver badges">43</li> <li class="s-award-bling s-award-blingbronze" title="66 bronze badges">66</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 29 '13 at 04:12">asked Apr 29 '13 at 04:12</time> <a href="../../users/1696846/n8coder" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1696846.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="n8coder" /> </a> <div class="s-user-card--info"> <a href="../../users/1696846/n8coder" class="s-user-card--link">n8coder</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">691</li> <li class="s-award-bling s-award-blingsilver" title="4 silver badges">4</li> <li class="s-award-bling s-award-bling__bronze" title="12 bronze badges">12</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-16271089" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="16271089" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-23285303" class="comment js-comment " data-comment-id="23285303" data-comment-owner-id="392978" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment23285303_16271089"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">are you using some javascript framework like JQuery?</span> – <a href="../../users/392978/fxckdead" title="408 reputation" class="comment-user ">FxckDead</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/16271089/using-iframe-to-add-one-html-page-to-another-how-to-give-effects-on-first-page#comment23285303_16271089"><span title="2013-04-29T04:17:03.610 License: CC BY-SA 3.0" class="relativetime-clean">Apr 29 '13 at 04:17</span></a></span> </div> </div> </li> <li id="comment-23285361" class="comment js-comment " data-comment-id="23285361" data-comment-owner-id="1696846" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment23285361_16271089"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">yes I sm using Jquery 1.9.1.</span> – <a href="../../users/1696846/n8coder" title="691 reputation" class="comment-user owner">n8coder</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/16271089/using-iframe-to-add-one-html-page-to-another-how-to-give-effects-on-first-page#comment23285361_16271089"><span title="2013-04-29T04:21:49.523 License: CC BY-SA 3.0" class="relativetime-clean">Apr 29 '13 at 04:21</span></a></span> </div> </div> </li> <li id="comment-23285386" class="comment js-comment " data-comment-id="23285386" data-comment-owner-id="200291" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment23285386_16271089"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Are the documents on the same domain?</span> – <a href="../../users/200291/icktoofay" title="126,289 reputation" class="comment-user ">icktoofay</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/16271089/using-iframe-to-add-one-html-page-to-another-how-to-give-effects-on-first-page#comment23285386_16271089"><span title="2013-04-29T04:23:18.443 License: CC BY-SA 3.0" class="relativetime-clean">Apr 29 '13 at 04:23</span></a></span> </div> </div> </li> <li id="comment-23285412" class="comment js-comment " data-comment-id="23285412" data-comment-owner-id="1696846" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment23285412_16271089"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">both documents are in same domain</span> – <a href="../../users/1696846/n8coder" title="691 reputation" class="comment-user owner">n8coder</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/16271089/using-iframe-to-add-one-html-page-to-another-how-to-give-effects-on-first-page#comment23285412_16271089"><span title="2013-04-29T04:25:44.290 License: CC BY-SA 3.0" class="relativetime-clean">Apr 29 '13 at 04:25</span></a></span> </div> </div> </li> <li id="comment-23285533" class="comment js-comment " data-comment-id="23285533" data-comment-owner-id="392978" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment23285533_16271089"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You change the URL of the iframe when some button is clicked? is only one iframe? If you want to add some effects to the elements insed of the iFrame see this answer : [link](http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe)</span> – <a href="../../users/392978/fxckdead" title="408 reputation" class="comment-user ">FxckDead</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/16271089/using-iframe-to-add-one-html-page-to-another-how-to-give-effects-on-first-page#comment23285533_16271089"><span title="2013-04-29T04:35:43.077 License: CC BY-SA 3.0" class="relativetime-clean">Apr 29 '13 at 04:35</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="16271569"></a> <div id="answer-16271569" class="answer accepted-answer" data-answerid="16271569" data-ownerid="1201317" data-score="1" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="16271569"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p><a href="../../questions/4689145/pass-jquery-variables-between-iframe-and-parent">something like that</a></p> <p>use</p> <pre><code>$("#myid", top.document); </code></pre> <p>or </p> <pre><code>$("#myid", parent.document.body); </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 11:53">edited May 23 '17 at 11:53</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Apr 29 '13 at 05:11">answered Apr 29 '13 at 05:11</time> <a href="../../users/1201317/elrado" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1201317.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="elrado" /> </a> <div class="s-user-card--info"> <a href="../../users/1201317/elrado" class="s-user-card--link">elrado</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,960</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="17 silver badge">17</li> <li class="s-award-bling s-award-bling__bronze" title="15 bronze badge">15</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>