jquery - What is preventing my JavaScript from modifying the iframe? -
there example here inserts iframe height of iframe changed height of inserted content. explains trick here.
however when try , bootstrap example, preventing javascript modifying iframe. height
never added iframe.
question
can see why height
isn't added iframe, done in original example?
i using iframe content
wget http://www.456bereastreet.com/lab/iframe-height/iframe-content.html
and html is
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <style> iframe { width:100%; margin:0 0 1em; border:0; } #external-frame {min-height:800px;} body { padding-top: 70px; } .container .jumbotron { background-color: #ffffff; padding-right: 0px; padding-left: 0px; height: 100%; margin:0 auto; } </style> <script> window.onload = function () { setiframeheight(document.getelementbyid('external-frame')); }; </script> </head> <body> <div class="container"> <div class="jumbotron"> <iframe src="iframe-content.html" frameborder="0" id="external-frame"></iframe> </div> </div> </body> </html>
this feels obvious, looks didn't define setiframeheight
or include script defines it.
if want call function, need have function.
that's function, copied page linked to:
function setiframeheight(iframe) { if (iframe) { var iframewin = iframe.contentwindow || iframe.contentdocument.parentwindow; if (iframewin.document.body) { iframe.height = iframewin.document.documentelement.scrollheight || iframewin.document.body.scrollheight; } } };
paste in script
tag , should go.
Comments
Post a Comment