javascript - jQuery appending iframe to div without reload - Stack Overflow

admin管理员组

文章数量:1400336

$("#div").append('<iframe width="200" height="100" src=";amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');

By using this example append cause page reload, maybe are some issue to load youtube iframe without reloading page

Demo: /

My observation is wrong it's not realod the page.

$("#div").append('<iframe width="200" height="100" src="https://www.youtube./embed/zoMYU_nOGNg?rel=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');

By using this example append cause page reload, maybe are some issue to load youtube iframe without reloading page

Demo: https://jsfiddle/0uqtn0u5/

My observation is wrong it's not realod the page.

• javascript
• jquery
• iframe

Share Improve this question Follow edited May 4, 2016 at 8:42 Wizard asked May 4, 2016 at 8:09 WizardWizard 11.3k3838 gold badges9999 silver badges167167 bronze badges 9

• 1 What triggers the call? – mplungjan Commented May 4, 2016 at 8:14
• Your posted code doesn't reload the page but the iframe. Is it your issue??? – A. Wolff Commented May 4, 2016 at 8:15
• @A.Wolff page reloads - same as press F5 – Wizard Commented May 4, 2016 at 8:16
• So something else refreshs it or your observation is wrong. If you think all page is refreshed because of browser loading icon is animated, that not means all the page is refreshed but in this case just that some page element is loading – A. Wolff Commented May 4, 2016 at 8:17
• 1 @Wizard So ya, your observation is wrong, see: jsfiddle/0uqtn0u5/1 – A. Wolff Commented May 4, 2016 at 8:24

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 3

Some browsers will treat <button> as a submit button and submit to the same page regardless of the button being a child of a form or not.

Change to

$('button').on('click', function(e){
  e.preventDefault();
  $("#youtube").append('<iframe width="200" height="100" src="https://www.youtube./embed/zoMYU_nOGNg?rel=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
});

or add type="button" to it.

If you DO have a form, instead do make the button a submit button and prevent the default action on the form submit:

$('form').on('submit', function(e){
  e.preventDefault();
  $("#youtube").append('<iframe width="200" height="100" src="https://www.youtube./embed/zoMYU_nOGNg?rel=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>');
});

There is no other reason for the page to reload. Your code should not and indeed does not reload anything in Chrome

Take a look: How to prevent an iframe from reloading when moving it in the DOM

"If you're trying to move it visually, you can try modifying the CSS to use absolute positioning or some other adjustments.

However, if you're trying to actually pull it out of the DOM and insert it somewhere else, you won't be able to avoid a reload."

~ John Fisher

Also: https://stackoverflow./a/8318401/5444802

"It isn't possible to move an iframe from one place in the dom to another without it reloading."

~ Kevin B

Check the youtube api for iframe embedding https://developers.google./youtube/iframe_api_reference#Loading_a_Video_Player

本文标签： javascriptjQuery appending iframe to div without reloadStack Overflow