允许网页特定部分的响应式iframe-如何执行? [英] Allowing responsive iframe of specific part of page - how?

问题描述

我从各种来源收集了这段代码，以便嵌入页面特定部分的iframe:

I have this code I put together from various sources to allow embedding an iframe of a specific part of a page:

<style type="text/css">
body {background:transparent;
height:2000px;
width:870px;
}
</style>
<div style="border: 1px solid rgb(250, 0, 0); overflow: hidden; margin: 0px auto; max-width: 900px;">
<iframe scrolling="no" src="https://https://sites.google.com/site/yourcommentsite/test" style="border: 0px none; margin-left: -15px; height: 9999px; margin-top: -365px; width: 900px;">
</iframe>
</div>

此处解释此代码的原因: https://sites.google.com/site/yourcommentsite/

The reason for this code is explained here: https://sites.google.com/site/yourcommentsite/

第一部分是在包含iframe的小工具内部确保iframe周围的透明性(除非它在小工具中，否则它不适用于Google Site).然后，我制作一个带有边框的红色窗口"，其中包括网站的iframe.我调整iframe的尺寸并将其相对于窗口"定位，并嵌入了注释部分.这段代码嵌入了900px宽和9999px长的iframe.

The first part is for transparency around the iframe, inside the gadget that will include the iframe (doesn't work with Google Site unless it's in a gadget). Then I make a red bordered "window" that includes the iframe of a site. I size the iframe and position it relative to the "window" and I have the comment section embedded. This code embeds a 900px wide and 9999px long iframe.

这是与Google协作平台一起使用的，以允许嵌入另一个Google协作平台页面的特定部分.

This is for use with Google Sites, to allow embedding of a specific part of the page of another Google Site.

问题是:它没有响应能力，因此结构有点复杂，并且取决于用户的屏幕分辨率，因此尝试使用它的人将制作固定大小的iframe，其他显示器也会裁切iframe或也将其制成小的.如果iframe被剪切/溢出，则会出现一个滚动条，但这不是最干净的解决方案.

The problem is: it's not responsive, so the istructions are a bit complicated and dependent on user's screen resolution, so people trying to use it will be making a fixed size iframe, and other displays will cut the iframe or make it too small. If the iframe is cut/overflows a scrollbar will appear, but it's not the cleanest solution.

我想使它具有响应性，但是我已经看到了解决方案，我不能使其与仅允许访问网站特定部分的窗口"一起使用.

I want to make it responsive, but solutions I've seen I can't make them work with the "window" that allows getting a specific part of site only.

我几乎不了解编码，所以您能帮我找到解决方法吗?

I know close to nothing of coding, so could you help me find a solution?

此外，很难将JavaScript添加到Google协作平台，并且不允许src ="xxxx.js"或"xxxx.css".

Also, it's very difficult to add javascript to Google Sites, and it doesn't allow src="xxxx.js" or "xxxx.css".

谢谢！

推荐答案

在 http://上查看我的示例jsfiddle.net/7k3sscdk/.这是通过将所有内容的高度和宽度设置为100％来实现的.但是，如果iframe指向的网站没有响应，则您也无法使iframe内容在您的网站上响应.

Have a look at my example at http://jsfiddle.net/7k3sscdk/. This works by setting the height and width of everything to 100%. But, if the site that the iframe is pointing to, is not responsive, you can't make the iframe content responsive on your site either.

<iframe src='http://www.example.com' style='border: 0;' width='100%' height='100%' scrolling='no'></iframe>

这篇关于允许网页特定部分的响应式iframe-如何执行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！