更改 iframe 中的 src 取决于视口大小

Question

我在网站区很新

我正在尝试更改 iframe 中的 src，其中 src 内容是一个表格以及宽度和高度，这使得它没有响应

我正在尝试更改取决于视口大小的 src

这是我的代码

 <iframe width="100%" height="410" scrolling="yes" frameborder="0" scrolling="no" allowtransparency="true" src="http://tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width=375&height=410&text_color=333&text_hover_color=082F60"></iframe> <div id="fxempire_link" style="width:500px;font-size: 11px;"> The Free Charts are Powered by <a rel="nofollow" style="text-decoration: underline;" target="_blank" href="http://www.fxempire.com">FXEmpire.com</a> - Your Leading Financial Portal</div>

我正在尝试自动更改 src 内的以下宽度

src="http://tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width=375&height=410&text_color=333&text_hover_color=082F60"

但我不知道这样做

有没有办法做到？？我在互联网上发现的都是使用链接或按钮来更改 src

Answer 1

好吧，因为 Access-Control-Allow-Origin 你不能用 ajax 来做，你可以用 php 来做，但我不知道这会是合法的/非法的。

通过使用 iframe 它以这种方式工作，但只是非常缓慢，因为 iframe 需要很多时间来加载...：

$(window).bind('load resize',function(){
    var windowH = $(window).height(),
        windowW = $(window).width();

    $('#iframe').attr('src','//tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width='+windowW+'&height='+windowH+'&text_color=333&text_hover_color=082F60');
    $('#iframe').css({'height':windowH+'px', 'width':windowW+'px'});    
})

http://jsfiddle.net/ebjsd8xx/3/

编辑：为了更好的性能，我稍微更改了代码，但是，嗯 - 图表加载速度仍然非常慢，但在预览中是一样的..

var resizeTimer;

$(window).load(function(){
   $(window).trigger('resize');
});

$(window).resize(function(e){
    var windowH = $(window).height(),
        windowW = $(window).width();

    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
       $('#iframe').attr('src','http://tools.fxempire.com/sidebar- quotes.php?instruments=5,10,1,2,4,3&width='+windowW+'&height='+windowH+'&text_color=333&text_hover_color=082F60');

       $('#iframe').css({'height':windowH+'px', 'width':windowW+'px'}); 

     }, 250);


})

http://jsfiddle.net/ebjsd8xx/7/

Answer 2

也许像这样？

jQuery(document).ready(function(){
    var iframe=jQuery('iframe'),/** target iFrame */
        src=iframe.attr('src'); /** src of iFrame */

    /** check viewport size */
    if (window.innerWidth<945){

        /** remove width value from src */
        src=src.replace(/(&width=[0-9]+)/,'');

        /** add new width */
        src+='&width=275';

        /** PROFIT */
        iframe.attr('src',src);
    }
});

在jsfiddle 上

Answer 3

对我来说，在给定视口大小的情况下选择src的最简单方法是使用一个小脚本，其中您的 iframe 具有id="vid"

<script>
  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("vid");
  
  if (w.matches) {
    vid.src = "media/test_1.mp4";
  } else {
    vid.src = "media/test_2.mp4";
  }

</script>

这将在您第一次加载页面时选择源，但如果您稍后调整视口大小，则不会更改它，因为您需要侦听调整大小事件（ 这可能会有所帮助）。