我在fancybox中第二次显示/加载iframe时遇到了问题。
我在fancybox弹出窗口中嵌入来自Facebook，Twitter，Instagram等不同社交媒体平台的各种内容。
当我点击按钮一次向我显示弹出窗口时。一切都没有问题。 iFrame加载并显示。
当我现在关闭并尝试再次打开fancybox时，会出现弹出窗口但内容不会出现。
要使用jQuery.html插入iFrame。
我甚至不知道问题出在哪里。有什么建议 ？
这是我的代码：下面再解释一下！
$(document).ready(function() {
outout = "";
FanBox = "";
$("#iFramePlace").load(function() {
alert('LOAD');
$.fancybox.reposition();
});
$('.single_add_to_cart_button').on('click', function(e) {
var id = $('input[name="add-to-cart"]').val();
var link = $("input[name='tmcp_textfield_1']").val();
console.log(link);
FanBox = $.fancybox;
FanBox({
//jQuery.fancybox({
href: '#cc_add_to_cart_confirm',
autoCenter: true,
'closeBtn': false,
'hideOnContentClick': false,
padding: 0,
centerOnScroll: true,
autoScale: true
});
$(this).removeClass('loading');
if (link !== "")
ApiRequest(link, id);
else
alert("LINK FEHLT");
e.stopPropagation();
e.preventDefault();
});
$('#cc_add_to_cart_confirm .cc_agree').on('click', function(e) {
//$.fancybox.reposition();
FanBox.close();
delete FanBox;
FanBox = "";
delete output;
output = "";
//unset output;
$('.single_add_to_cart_button').addClass('loading').closest('form').submit();
e.stopPropagation();
});
$('#cc_add_to_cart_confirm .cc_disagree').on('click', function(e) {
FanBox.close();
delete FanBox;
//unset FanBox;
FanBox = "";
delete output;
output = "";
//unset output;
e.stopPropagation();
});
function ApiRequest(l, pid) {
$.get("apiServer/?l=" + l + "&id=" + pid, function(data) {
var ServerResult = JSON.parse(data);
console.log(ServerResult);
if (ServerResult.error == false) {
if (ServerResult.platform == 'fb') {
output = "";
output += "<div id=\"fb-root\"><\/div>";
output += " <script>";
output += " (function(d, s, id) {";
output += " var js, fjs = d.getElementsByTagName(s)[0];";
output += " if (d.getElementById(id)) return;";
output += " js = d.createElement(s);";
output += " js.id = id;";
output += " js.src = \"\/\/connect.facebook.net\/de_DE\/sdk.js#xfbml=1&version=v2.8&appId=1281569608559738\";";
output += " fjs.parentNode.insertBefore(js, fjs);";
output += " }(document, 'script', 'facebook-jssdk'));";
output += " <\/script>";
if (ServerResult.typ == 'fanpage') {
output += "<div class=\"fb-page\" data-href=\"" + ServerResult.embedLink + "\" data-small-header=\"false\" data-adapt-container-width=\"true\" data-tabs=\"timeline\" data-hide-cover=\"false\" data-show-facepile=\"false\">";
output += " <blockquote cite=\"" + ServerResult.embedLink + "\" class=\"fb-xfbml-parse-ignore\">";
output += " <\/div>";
}
if (ServerResult.typ == 'post' || ServerResult.typ == 'photo') {
output += "<div class=\"fb-post\" data-href=\"" + ServerResult.embedLink + "\" data-show-text=\"true\">";
output += " <blockquote cite=\"" + ServerResult.embedLink + "\" class=\"fb-xfbml-parse-ignore\">";
output += " <\/div>";
}
if (ServerResult.typ == 'video') {
output += "<div class=\"fb-video\" data-href=\"" + ServerResult.embedLink + "\" data-show-text=\"true\">";
output += " <blockquote cite=\"" + ServerResult.embedLink + "\" class=\"fb-xfbml-parse-ignore\">";
output += " <\/div>";
}
}
if (ServerResult.platform == 'ig') {
if (ServerResult.typ == 'profile') {
console.log(ServerResult.embedLink);
}
if (ServerResult.typ == 'picture' || ServerResult.typ == 'video') {
var output = "";
output += "<blockquote class=\"instagram-media\" data-instgrm-version=\"7\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\">";
output += " <div style=\"padding:8px;\">";
output += " <div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.4537037037% 0; text-align:center; width:100%;\">";
output += " <div style=\" background:url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC\/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5\/P8\/t9FuRVCRmU73JWlzosgSIIZURCjo\/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI\/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf\/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"><\/div>";
output += " <\/div>";
output += " <p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\"><a href=https:\/\/www.instagram.com\/p\/" + ServerResult.embedLink + " style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;\" target=\"_blank\"><\/a>";
output += " <time style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\" datetime=\"2016-11-20T17:34:50+00:00\"><\/time>";
output += " <\/p>";
output += " <\/div>";
output += " <\/blockquote>";
output += " <script async defer src=\"\/\/platform.instagram.com\/en_US\/embeds.js\"><\/script>";
}
}
if (ServerResult.platform == 'yt') {
if (ServerResult.typ == 'channel') {
var output = "";
output += "<script src=\"https:\/\/apis.google.com\/js\/platform.js\"><\/script>";
output += "<div class=\"g-ytsubscribe\" data-channelid=\"" + ServerResult.embedLink + "\" data-layout=\"full\" data-count=\"default\"><\/div>";
}
if (ServerResult.typ == 'video') {
var output = "";
output += "<div class=\"ytcontainer\">";
output += "<iframe src=\"\/\/www.youtube.com\/embed\/" + ServerResult.embedLink + "\"frameborder=\"0\" allowfullscreen class=\"ytvideo\"><\/iframe>";
output += "<\/div>";
}
}
if (ServerResult.platform == 'dp') {
if (ServerResult.typ == 'profile') {
var output = "";
output += "<script src=\"https:\/\/apis.google.com\/js\/platform.js\" async defer><\/script>";
output += " <div class=\"g-person\" data-href=\"https:\/\/plus.google.com\/" + ServerResult.embedLink + "\"><\/div>";
}
if (ServerResult.typ == 'post') {
console.log('post');
console.log(ServerResult.embedLink);
var output = "";
output += "<script src=\"https:\/\/apis.google.com\/js\/platform.js\" async defer><\/script>";
output += " <div class=\"g-post\" data-href=\"https:\/\/plus.google.com\/" + ServerResult.embedLink + "\"><\/div>";
}
}
if (ServerResult.platform == 'tw') {
if (ServerResult.typ == 'profile') {
var output = "";
output += "<a class=\"twitter-timeline\" data-chrome=\"noscrollbar\" data-tweet-limit=\"1\" data-theme=\"light\" href=\"" + ServerResult.embedLink + "\">Tweets <\/a> <script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>";
}
if (ServerResult.typ == 'tweet') {
var output = "";
output += "<blockquote class=\"twitter-tweet\" data-lang=\"de\"><p lang=\"de\" dir=\"ltr\"> <a href=\"" + ServerResult.embedLink + "\"><\/a><\/blockquote>";
output += " <script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>";
}
}
if (ServerResult.platform == 'sc') {
if (ServerResult.typ == 'profile') {
var output = "";
output += "<iframe width=\"100%\" height=\"450\" scrolling=\"no\" frameborder=\"no\" src=\"https:\/\/w.soundcloud.com\/player\/?url=https%3A\/\/api.soundcloud.com\/users\/" + ServerResult.embedLink + "&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true\"><\/iframe>";
}
if (ServerResult.typ == 'track') {
var output = "";
output += "<iframe width=\"100%\" height=\"450\" scrolling=\"no\" frameborder=\"no\" src=\"https:\/\/w.soundcloud.com\/player\/?url=https%3A\/\/api.soundcloud.com\/tracks\/" + ServerResult.embedLink + "&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true\"><\/iframe>";
}
}
} else
var output = "Mit dem Link stimmt etwas nicht !";
//output = "<iframe src='http://likepocket.de/apiServer/catchContent.php?l="+ServerResult.embedLink+"/' frameborder='0' allowfullscreen class='fb-page'></iframe>";
$("#iFramePlace").html(output);
});
};
});
这就是一切。 我将输入值传递给我的服务器上的php文件，然后我收到了json。这个json包含嵌入我想要显示的内容所需的“链接”以及一些其他信息来决定我需要使用哪种嵌入。
然后它会被id iFrameplace抛入div中。
我希望你能看透这个烂摊子：S
退缩！