iFrame and JavaScript in Action

by Abid Shaik

HTML

<!--iFrame and JavaScript in Action -->
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://www.jqueryscript.net/demo/Flat-Virtual-Keyboard-Plugin-with-jQuery-jQuery-UI-jqKeyboard/css/jqkeyboard.css"  rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://www.jqueryscript.net/demo/Flat-Virtual-Keyboard-Plugin-with-jQuery-jQuery-UI-jqKeyboard/built/jqkeyboard.js"></script>
  <script src="http://www.jqueryscript.net/demo/Flat-Virtual-Keyboard-Plugin-with-jQuery-jQuery-UI-jqKeyboard/layouts/jqk.layout.en-bg.js"></script>
 
 <p> HTML Object for external Link</p>
<object id="objFL" width="700" height="300" data="http://brightdoor.com">
</object>
 <p> iFrame Embeded in Div</p>
 <div class="iframeholder" id="divifh">
 <input type="text">
</div>

<p> Pure Iframe</p>
<iframe id="myiFrame" src="http://bdt.brightdoor.com" width="800" height="500">
</iframe>
    
<div id="debugDiv">

</div>
<!--Replace Reynold's link with http://brightdoor.com

Reynolds Sample Link : 
http://reynoldsplantation.clubhouseonline-e3.net/Mobile/TeeTimes/Search.aspx
-->

CSS

iframe{  
  width: 700px; 
  Height: 300px
}
#jq-keyboard{
  display: block !important;
}

JavaScript

/*var myIframe = document.getElementById('myiFrame');
console.log(myIframe);
myIframe.contentWindow.scrollTo(300, 200);*/

//document.domain = 'bdt.brightdoor.com'; 

 $(document).ready(function () {
  
  $('.iframeholder').on('click', function(e) {
     e.preventDefault();
    // alert('test'); 
   });
   
   $('<iframe id="iFrinDiv" />').attr('src', 'http://bdt.brightdoor.com').appendTo('#divifh');
   
   console.log($("#objFL").contents().find( "document" ).css( "background-color", "#BADA55" )); 
   $("#objFL").contents().find( ".fusion-header" ).css( "background-color", "#BADA55" );
   
   $("#iFrinDiv").on("load", function(){
   var f = $(this).contents().find("#aspnetForm"); 
   console.log(f[0]); 
                   jqKeyboard.init({containment : "#myiFrame"});
   });
   
                   /*   jqKeyboard.init({
                    containment: "#divifh",
                    //allowed: ["input"],
                    icon: "dark"
                });
                      jqKeyboard.init({
                    containment: "#objFL",
                    //allowed: ["input"],
                    icon: "dark"
                });*/
  
});

//$( "#myiFrame" ).contents().find( ".fusion-header" ).css( "background-color", "#BADA55" );
//$("#twtr").contents().find(".regular").css( "background-color", "#BADA55" );