Question

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

通过使用此示例append导致页面重新加载，可能是加载youtube iframe而无需重新加载页面的问题

演示：https://jsfiddle.net/0uqtn0u5/

我的观察结果是不对的，因为它不会影响页面。

Answer 1

有些浏览器会将<button>视为提交按钮并提交到同一页面，而不管该按钮是否为表单的子项。

更改为

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

或向其添加type="button"。

如果您有表单，请将按钮设为提交按钮并阻止表单上的默认操作提交：

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

页面没有其他原因可以重新加载。您的代码不应该也不会在Chrome中重新加载任何内容

Answer 2

看一看： How to prevent an iframe from reloading when moving it in the DOM

＆＃34;如果您尝试直观地移动它，可以尝试修改CSS以使用绝对定位或其他一些调整。

但是，如果您尝试将其从DOM中取出并将其插入其他位置，则无法避免重新加载。＆＃34;

~John Fisher

同时 https://stackoverflow.com/a/8318401/5444802

＆＃34;在没有重新加载的情况下，将iframe从dom中的一个位置移动到另一个位置是不可能的。＆＃34;

~Kevin B

Answer 3

检查youtube api是否有iframe嵌入 https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

jQuery将iframe附加到div而不重新加载

3 个答案: