Css 响应性谷歌图表是如何从iframe标签中获得的？
我想从谷歌工作表创建一个图表。我从电子表格中导出图表，然后获取URL。但由于cors问题，我无法使其响应。所以，我认为整个iframe都是通过变换来响应的：缩放？但这不是一个好的解决方案。你有什么想法让这个iframe响应吗 以下是我的片段：-Css 响应性谷歌图表是如何从iframe标签中获得的？,css,iframe,google-sheets,transform,responsive,Css,Iframe,Google Sheets,Transform,Responsive,我想从谷歌工作表创建一个图表。我从电子表格中导出图表，然后获取URL。但由于cors问题，我无法使其响应。所以，我认为整个iframe都是通过变换来响应的：缩放？但这不是一个好的解决方案。你有什么想法让这个iframe响应吗 以下是我的片段：- 我也面临这个问题，因为这张谷歌电子表格发布的图表。顺便说一句，你的标题有误导性，这不是谷歌图表，它是另一种不同于谷歌的产品，用于创建真正合适的网络图表 回到问题上来，“谷歌电子表格发布图表”内容本身没有响应性，这与如何使iframe本身具有响应性无关
我也面临这个问题，因为这张谷歌电子表格发布的图表。顺便说一句，你的标题有误导性，这不是谷歌图表，它是另一种不同于谷歌的产品，用于创建真正合适的网络图表 回到问题上来，“谷歌电子表格发布图表”内容本身没有响应性，这与如何使iframe本身具有响应性无关 Iframe可以响应，但我们不能修改发布的谷歌电子表格中的图表内容，使其响应 我已经尝试了一些类似的技巧，只对视频和一些响应性强的内容网站有效
http://jsfiddle.net/marhensa/g9op54wx/
https://codepen.io/alxfyv/pen/QEjEbp
http://jsfiddle.net/marhensa/g9op54wx/
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
// this script is written by yazzz https://stackoverflow.com/a/35819751/9894532
$(function() {
$("#wrapper").each(function() {
var $wrap = $(this);
function iframeScaler(){
var wrapWidth = $wrap.width(); // width of the wrapper
var wrapHeight = $wrap.height();
var childWidth = $wrap.children("iframe").width(); // width of child iframe
var childHeight = $wrap.children("iframe").height(); // child height
var wScale = wrapWidth / childWidth;
var hScale = wrapHeight / childHeight;
var scale = Math.min(wScale,hScale); // get the lowest ratio
$wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" }); // set scale
};
$(window).on("resize", iframeScaler);
$(document).ready( iframeScaler);
});
});
</script>
</head>
<body>
<p>Responsive and Dynamic Iframe Scaling of Published Chart from Google Spreadsheet</p>
<p>Courtesy of <a href="https://stackoverflow.com/a/35819751/9894532">yazzz from Javascript StackOverflow</a></p>
<div id="wrapper">
<iframe width="500" height="294" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRB4wPFarqsHWgk0ubQ6bH3YC5iwvDayAkrDg0iNPipAAszBA26QnFaPC1Xk5g8XF1ixP7jnsxiaMzL/pubchart?oid=1495533449&format=interactive"></iframe>
</div>
</body>
我也面临这个问题，因为这张谷歌电子表格发布的图表。顺便说一句，你的标题有误导性，这不是谷歌图表，它是另一种不同于谷歌的产品，用于创建真正合适的网络图表 回到问题上来，“谷歌电子表格发布图表”内容本身没有响应性，这与如何使iframe本身具有响应性无关 Iframe可以响应，但我们不能修改发布的谷歌电子表格中的图表内容，使其响应 我已经尝试了一些类似的技巧，只对视频和一些响应性强的内容网站有效
http://jsfiddle.net/marhensa/g9op54wx/
https://codepen.io/alxfyv/pen/QEjEbp
http://jsfiddle.net/marhensa/g9op54wx/
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
// this script is written by yazzz https://stackoverflow.com/a/35819751/9894532
$(function() {
$("#wrapper").each(function() {
var $wrap = $(this);
function iframeScaler(){
var wrapWidth = $wrap.width(); // width of the wrapper
var wrapHeight = $wrap.height();
var childWidth = $wrap.children("iframe").width(); // width of child iframe
var childHeight = $wrap.children("iframe").height(); // child height
var wScale = wrapWidth / childWidth;
var hScale = wrapHeight / childHeight;
var scale = Math.min(wScale,hScale); // get the lowest ratio
$wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" }); // set scale
};
$(window).on("resize", iframeScaler);
$(document).ready( iframeScaler);
});
});
</script>
</head>
<body>
<p>Responsive and Dynamic Iframe Scaling of Published Chart from Google Spreadsheet</p>
<p>Courtesy of <a href="https://stackoverflow.com/a/35819751/9894532">yazzz from Javascript StackOverflow</a></p>
<div id="wrapper">
<iframe width="500" height="294" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRB4wPFarqsHWgk0ubQ6bH3YC5iwvDayAkrDg0iNPipAAszBA26QnFaPC1Xk5g8XF1ixP7jnsxiaMzL/pubchart?oid=1495533449&format=interactive"></iframe>
</div>
</body>
谢谢你的回答，不幸的是，除了巧妙的方法外，别无选择。这是工作，但我找到了更好的方法。你可以双向取你的图表。一种方式是交互式的，它意味着画布。第二种方式是形象。当你的屏幕显示桌面或类似设备时，我会显示交互式链接，如果你登录手机，你会看到带有标签的图像。你能详细介绍一下交互式画布吗？当调整大小时，它在iframe中是否也有响应？不幸的是，没有，因为您无法访问iframe的样式表。您可以通过两种方式导出图形，第一种是交互方式，因为您知道这是画布。二是形象。我做了什么？如果您登录移动设备，我会向您显示图像url。如果你是登录桌面或其他东西，你会看到固定大小的画布。哦，好的，我明白了。它不同于我的客户需求，在一些div布局中显示多个图形，需要响应的iframe及其内容。因为即使在桌面模式下，屏幕大小、分辨率和dpi也可能会有很大的差异。您可以从工作表中获取数据，并通过编程方式构建自己的图表。感谢您的回答，不幸的是，除了复杂的方法外，无事可做。这是工作，但我找到了更好的方法。你可以双向取你的图表。一种方式是交互式的，它意味着画布。第二种方式是形象。当你的屏幕显示桌面或类似设备时，我会显示交互式链接，如果你登录手机，你会看到带有标签的图像。你能详细介绍一下交互式画布吗？当调整大小时，它在iframe中是否也有响应？不幸的是，没有，因为您无法访问iframe的样式表。您可以通过两种方式导出图形，第一种是交互方式，因为您知道这是画布。二是形象。我做了什么？如果您登录移动设备，我会向您显示图像url。如果你是登录桌面或其他东西，你会看到固定大小的画布。哦，好的，我明白了。它不同于我的客户需求，在一些div布局中显示多个图形，需要响应的iframe及其内容。因为即使在桌面模式下，屏幕大小、分辨率和dpi也可能有很大的差异。你们可以从工作表中获取数据，并通过编程方式构建你们自己的图表