javascript - getting all iFrames within a div and resizing them for mobile - Stack Overflow

admin管理员组

文章数量:1022874

In short, the problem is this: we have a news site that has a mobile version of the website. For the page that displays whatever article is called, occasionally, there are embedded videos (from youtube) that show up in iframes. Their default size is typically something like 580px, which obviously es out far too big and wide on a mobile browser.

I wanted to use javascript to search the content and resize any iframe as it finds it. That said, I don't know if using JavaScript on mobile will be the best thing to do, and second, I'm not sure how to search for all instances of a certain element type like that. The iframes do not e in with names or IDs...

I briefly considered using PHP to search for <iframe but it seems that php, in this instance, would be unnecessarily sloppy and potentially easily broken.

Does anybody have advice/suggestions on how to handle this problem?

In short, the problem is this: we have a news site that has a mobile version of the website. For the page that displays whatever article is called, occasionally, there are embedded videos (from youtube) that show up in iframes. Their default size is typically something like 580px, which obviously es out far too big and wide on a mobile browser.

I wanted to use javascript to search the content and resize any iframe as it finds it. That said, I don't know if using JavaScript on mobile will be the best thing to do, and second, I'm not sure how to search for all instances of a certain element type like that. The iframes do not e in with names or IDs...

I briefly considered using PHP to search for <iframe but it seems that php, in this instance, would be unnecessarily sloppy and potentially easily broken.

Does anybody have advice/suggestions on how to handle this problem?

• javascript
• html
• mobile

Share Improve this question Follow edited Aug 15, 2011 at 14:45 Prisoner 27.7k1111 gold badges7676 silver badges103103 bronze badges asked Aug 15, 2011 at 14:43 Cyprus106Cyprus106 5,78066 gold badges4343 silver badges4949 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Using jQuery it's very easy to select elements based on tag.

jQuery:

$('iframe').width(300);

Fairly easy using normal DOM as well.

var iframes = document.getElementsByTagName('iframe');
    for (var i=0; i<iframes.length; i++)
    {
      iframes[i].style.width = "300px"
    }

Using jQuery, resizing all iframes on a document would be as simple as typing, for example,

$('iframe').css('width', '200px');

Sure, jQuery has an overhead in terms of size, but minified and gzipped, its footprint is not so large, even for mobile applications.

This worked for me:

Just include the width margin you want at the top:

//Just Change this
var margin = "20";
//////////////////////////////////////////////////////
var iframes = document.getElementsByTagName('iframe');
var w = window.innerWidth || document.body.clientWidth;
var newwidth = w - ( 2 * margin );

for (var i=0; i<iframes.length; i++)
{
 var currentheight = iframes[i].height;
 var currentwidth  = iframes[i].width;  
 var newheight = (newwidth / currentwidth) * currentheight;

  iframes[i].style.width = newwidth+"px";
  iframes[i].style.height = newheight+"px";
}

In short, the problem is this: we have a news site that has a mobile version of the website. For the page that displays whatever article is called, occasionally, there are embedded videos (from youtube) that show up in iframes. Their default size is typically something like 580px, which obviously es out far too big and wide on a mobile browser.

I wanted to use javascript to search the content and resize any iframe as it finds it. That said, I don't know if using JavaScript on mobile will be the best thing to do, and second, I'm not sure how to search for all instances of a certain element type like that. The iframes do not e in with names or IDs...

I briefly considered using PHP to search for <iframe but it seems that php, in this instance, would be unnecessarily sloppy and potentially easily broken.

Does anybody have advice/suggestions on how to handle this problem?

In short, the problem is this: we have a news site that has a mobile version of the website. For the page that displays whatever article is called, occasionally, there are embedded videos (from youtube) that show up in iframes. Their default size is typically something like 580px, which obviously es out far too big and wide on a mobile browser.

I wanted to use javascript to search the content and resize any iframe as it finds it. That said, I don't know if using JavaScript on mobile will be the best thing to do, and second, I'm not sure how to search for all instances of a certain element type like that. The iframes do not e in with names or IDs...

I briefly considered using PHP to search for <iframe but it seems that php, in this instance, would be unnecessarily sloppy and potentially easily broken.

Does anybody have advice/suggestions on how to handle this problem?

• javascript
• html
• mobile

Share Improve this question Follow edited Aug 15, 2011 at 14:45 Prisoner 27.7k1111 gold badges7676 silver badges103103 bronze badges asked Aug 15, 2011 at 14:43 Cyprus106Cyprus106 5,78066 gold badges4343 silver badges4949 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Using jQuery it's very easy to select elements based on tag.

jQuery:

$('iframe').width(300);

Fairly easy using normal DOM as well.

var iframes = document.getElementsByTagName('iframe');
    for (var i=0; i<iframes.length; i++)
    {
      iframes[i].style.width = "300px"
    }

Using jQuery, resizing all iframes on a document would be as simple as typing, for example,

$('iframe').css('width', '200px');

Sure, jQuery has an overhead in terms of size, but minified and gzipped, its footprint is not so large, even for mobile applications.

This worked for me:

Just include the width margin you want at the top:

//Just Change this
var margin = "20";
//////////////////////////////////////////////////////
var iframes = document.getElementsByTagName('iframe');
var w = window.innerWidth || document.body.clientWidth;
var newwidth = w - ( 2 * margin );

for (var i=0; i<iframes.length; i++)
{
 var currentheight = iframes[i].height;
 var currentwidth  = iframes[i].width;  
 var newheight = (newwidth / currentwidth) * currentheight;

  iframes[i].style.width = newwidth+"px";
  iframes[i].style.height = newheight+"px";
}

本文标签： javascriptgetting all iFrames within a div and resizing them for mobileStack Overflow