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

would be great if you can share your code. – Milind Anantwar Dec 24 '13 at 07:38 — Milind Anantwar, Dec 24 '13 at 07:38
I edited my code, check again please. – Exploring Dec 24 '13 at 07:42 — Exploring, Dec 24 '13 at 07:42
Can you share the dom of buttons that you want to change. – Milind Anantwar Dec 24 '13 at 07:44 — Milind Anantwar, Dec 24 '13 at 07:44
Dom means ? Did you check the link ? – Exploring Dec 24 '13 at 07:45 — Exploring, Dec 24 '13 at 07:45
Html of buttons and iframe attributes like id – Milind Anantwar Dec 24 '13 at 07:45 — Milind Anantwar, Dec 24 '13 at 07:45

score 4 · Answer 1 · answered Dec 24 '13 at 07:57

4

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()

answered Dec 24 '13 at 07:57

Shinigamae

854
3
18
35

I didn't get solution that's why I didn't marked as accepted answer. But I voted you. Thanks. – Exploring Dec 26 '13 at 04:20

score 2 · Answer 2 · answered Dec 24 '13 at 07:55

2

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

Jquery:

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

answered Dec 24 '13 at 07:55

Milind Anantwar

81,290
25
94
125

I used this also before but didn't work. Maybe @Shinigamae is right as they are from different source that's why they are not working. – Exploring Dec 24 '13 at 08:00
@Joy_S:thats what same domain means. You cant access them from outer parent window. – Milind Anantwar Dec 24 '13 at 08:02

score 0 · Answer 3 · answered Dec 24 '13 at 07:48

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";

score 0 · Answer 4 · answered Jan 15 '19 at 10:56

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;
}

score 0 · Answer 5 · answered Jan 15 '19 at 11:14

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;
}

I want to change the width of element inside an Iframe

5 Answers5