iframe 未使用 jQuery 嵌入到 div 中答案

【问题标题】：Iframe not embedding in a div using jQueryiframe 未使用 jQuery 嵌入到 div 中
【发布时间】：2017-03-06 18:28:58
【问题描述】：

我在使用 jQuery append() 方法时遇到了一个奇怪的问题。我想在一个 div 中附加一个包含 iframe 的容器，但不知何故它不起作用，虽然如果不是附加一个包含 iframe 的 div，如果我用任何其他普通 div 替换它，它工作正常。

Jquery/JavaScript 代码 -

var imageURL = 'https://www.youtube.com/embed/zZasH6qkn8M';
var setWidth = '90%';
var setHeight = '211px';
var iframeContainer = '<div id="iframecontainer" style="position: relative;left: 50%;border: 0;top: 50%;transform: translate(-50%, -50%)">'+'<iframe id="ytFrameId" class="ytClassa" width="' + setWidth + '" height="' + setHeight + '" src="' + imageURL +'></iframe>'+'</div>';

//var iframeContainer = '<div id="retro">This is retro</div>';
$('#test').append(iframeContainer);

让我知道我的方法做错了什么。

小提琴 - https://jsfiddle.net/vo4cg8o3/

【问题讨论】：

引用错误

标签： javascript jquery html css iframe

【解决方案1】：

你永远不会关闭 src 的属性

 ... src="' + imageURL +'></iframe>'+'</div>';
         ^
         open but not closed

【讨论】：

【解决方案2】：

您在src 属性末尾缺少一个结束引号，请尝试：

var iframeContainer = '<div id="iframecontainer" style="position: relative;left: 50%;border: 0;top: 50%;transform: translate(-50%, -50%)">'+'<iframe id="ytFrameId" class="ytClassa" width="' + setWidth + '" height="' + setHeight + '" src="' + imageURL +'"></iframe>'+'</div>';

Here it is working

【讨论】：

【解决方案3】：

试试这个简单的 javascript 代码。而不是.append 使用.html

$(document).ready(function() {
    $("#test").html("<iframe src='http://jsfiddle.net'></iframe>");  
});

【讨论】：