I want to change the width of element inside an Iframe

Question

I used a social sidebar in the left side of single post. I want to show all the buttons in the same sizes, they are now showing in different sizes. I want to make them all the same sizes like the "twitter" button. For checking please go here .

I tried many code but as their source is Iframe that's why my coding is not working. For google+ I used the following code:

$('#___plusone_1 iframe').load(function(){
  $('#___plusone_1 iframe').contents().addClass('googleplusbtn');
 }

So can you please help me ? Thanks.

I have checked these tutorials also but don't work for me:

jQuery changing contents of an iFrame

jQuery/JavaScript: accessing contents of an iframe

Answer 1

I don't think you can achieve this as your main page ( http://site4preview.site90.net/ ) and the iframes ( http://www.facebook.com/plugins/like.php ) are in different domains.

Jquery Contents function description:

The .contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.

Source: JQuery .contents()

Answer 2

If iframe url are from same domain. Then you can use:

Jquery:

$("#iFrame").contents().find(".someButtons").addClass("googleplusbtn");

Answer 3

if Iframe contain page of same application domain then it is possible, by:

var iframe = document.getElementById('html2');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

once you get the object, now you can access:

innerDoc.getElementById('divId').style.width="250px";

Answer 4

Here you go, you can easily change the width of iFrame using jQuery.This solution works same as iFrame. I have created a PHP script that can get all the contents from the other website, and most important part is you can easily apply your custom jQuery to that external content. Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery/JS as well. This content can be used anywhere, inside any element or any page.

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}

Answer 5

You can easily change the width using jQuery. This solution works same as iFrame. I have created a PHP script that can get all the contents from the other website, and most important part is you can easily apply your custom jQuery to that external content. Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery/JS as well. This content can be used anywhere, inside any element or any page.

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}