javascript - Load Clicked Id's Website in iframe on Click for Website in Database -
current website: enter image description here
i have website generated loop call database using php & mysql. have id, names, company website, address , image. displays name, description, , image displayed in stacked square boxes.
on click of box, i'm trying load iframe of company website overlays box. have been able of website iframes load when load site, if there more 5-6 rows of data, site loads slow because it's loading ~7 websites.
i've spent of day looking through jquery , iframe questions still have not been able iframes load on click individually when click on box. intention have user click on description/company box not iframe. load iframe , have appear on company box fills/hides content in box overlaying box content.
how load website onclick opened within iframe without loading of iframes inside dynamically generated page.
<?php require_once('include/header.php')?> <? require('include/navigation.php') ?> <html> <head> <meta charset="utf-8"> <title>coworking spaces</title> <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/mystyles'); ?>"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script> jquery(function(){ $("iframe").each(function(){ this.tmp = this.src; this.src = ""; }) .parent(".website") .click(function(){ var frame = $(this).children("iframe")[0]; console.log(frame); frame.src = frame.tmp; }); }); </script> </script> </script> </head> <body> <div id="container"> <div id='city_header'> <div id='city_search'> <h1> kansas city </h1> </div> </div> <div id="body"> <?php for($i = 0; $i < count($cospaces); ++$i){?> <div class="company_box" style ="background-image: url(<?php echo($cospaces[$i]['image'])?>);"> <div class="name_box"> <h3 class="space_name"><?php echo($cospaces[$i]['name'])?></h3> </div> <div class="description"> <p><?php echo($cospaces[$i]['description']) ?></p> </div> <!-- iframe wanting load --> <iframe id = "website" data-src="<?php echo($cospaces[$i]['website'])?>" width="200" height="200" style="background:#ffffff"></iframe> </div> <?php } ?> </div> <p class="footer">page rendered in <strong>{elapsed_time}</strong> seconds</p> </div> </div> </body> </html> tested suggested implementation:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript"> jquery(function($) { $('iframe').bind('load', function() { var childframe = $(this).contents().find('iframe'); var childelement = childframe.contents().find('body'); var src = $(this).attr('data-src'); childelement.on('click', function() { childframe.attr('src', src); }); }); }); </script> </head> <body> <iframe data-src="https://jsfiddle.net" srcdoc="<iframe id='hi' srcdoc='<body>click me</body>'></iframe>"> </iframe> </body> </html>
i not seeing this.src defined within php generated iframes initial .each function call.
i unsure why calling .parent('.website'), since traverse upward looking wrapping element class="website", php generated iframes have no parent other div id="body". e.g code looking for:
<div class="website"> <iframe></iframe> </div> one thing keep in mind when working iframes, content not available on domready, must attach load listener each iframe want modify contents of.
if understand correctly, want src of iframe load when user clicks iframe. have tried like
jquery(function($) { $('iframe').on('click', function(e) { var frame = $(this); frame.attr('src', frame.attr('data-src')); frame.off('click'); //remove on-click event prevent reloading on click }); }); the iframe target small, , trigger click event when clicking outer-border of iframe , not content body. iframes not act <div> elements or other block elements in regards dom events, , mileage vary on can per browser , per version.
unless attempting find iframes , change source within coworking spaces created iframes, not possible using javascript unless child iframes reside on same domain. see: same origin policy
otherwise can similar to
jquery(function($) { $('iframe').bind('load', function() { var childframe = $(this).contents().find('iframe'); var childelement = childframe.contents().find('body'); var src = $(this).attr('data-src'); childelement.on('click', function() { childframe.attr('src', src); }); }); }); this tell script wait each master iframe load, find child iframe, attach onclick event child iframe body set source master iframes data-src
example: https://jsfiddle.net/laomfx7g/
i use srcdoc attribute load static html iframe demonstrate binding same-origin content, since not able edit source content of external website jsfiddle.
lastly element id's (specifically <iframe id="website" in loop) expected unique, , function wildly different in varying browsers. affect first element specified id, others affect last, few read of specified ids, may or may not intended.
edit - comment clarification
jquery(function($) { $('.description').on('click', function() { var frame = $(this).next('iframe'); frame.attr('src', frame.attr('data-src')); $(this).off('click'); //remove click event }); }); example: https://jsfiddle.net/2x0yfpts/
Comments
Post a Comment