大佬教程收集整理的这篇文章主要介绍了javascript – 是否可以加载隐藏的div中的iframe,直到显示div?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我在网上找到的代码,使用jquery对我来说非常棒:
<script type="text/javascript"> $(document).ready(function(){ $('.show_hide').showHide({ speed: 500,// speed you want the toggle to happen easing: '',// the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI changeText: 1,// if you dont want the button text to change,set this to 0 showText: '@R_674_10613@EST A QUOTE',// the button text to show when a div is closed hideText: 'CLOSE' // the button text to show when a div is open }); }); </script>
css很简单:
#slidingDiv,#slidingDiv_2{ height:300px; BACkground-color: #e2e2e2; padding:20px; margin-top:10px; border-bottom:30px solid #000000; display:none; }
这是外部java脚本:
(function ($) { $.fn.showHide = function (options) { //default vars for the plugin var defaults = { speed: 1000,easing: '',changeText: 0,showText: 'Show',hideText: 'Hide' }; var options = $.extend(defaults,options); $(this).click(function () { $('.toggleDiv').slideUp(options.speed,options.easing); // this var stores which button you've clicked var toggleClick = $(this); // this reads the rel attribute of the button to determine which div id to toggle var toggleDiv = $(this).attr('rel'); // here we toggle show/hide the correct div at the right speed and using which easing effect $(toggleDiv).slideToggle(options.speed,options.easing,function() { // this only fires once the animation is completed if(options.changeText==1){ $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); } }); return false; }); }; })(jQuery);
现在我相信在这段代码中,即使没有显示,表单也会自动加载.我可能错了,请纠正我,如果是这样.
问题,如何确保div中的iframe只有当div不再隐藏时才会加载?
<div class="hidden_element"> <iframe data-src="http://msdn.microsoft.com"></iframe> </div>
当您显示父div时,发出一个使用iframe属性data-src的回调,并将其值设置为iframe的src属性,使其加载.
// Show our element,then call our callBACk $(".hidden_element").show(function(){ // Find the iframes within our newly-visible element $(this).find("iframe").prop("src",function(){ // Set @R_696_8917@ src attribute to the value of data-src return $(this).data("src"); }); });
以上是大佬教程为你收集整理的javascript – 是否可以加载隐藏的div中的iframe,直到显示div?全部内容,希望文章能够帮你解决javascript – 是否可以加载隐藏的div中的iframe,直到显示div?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。