根据视口大小更改 iframe 中的 src答案

【问题标题】：change src in iframe which depend on viewport size根据视口大小更改 iframe 中的 src
【发布时间】：2015-09-24 16:23:48
【问题描述】：

我是网站领域的新手

我正在尝试更改我的 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"

但我不知道该怎么做

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

【问题讨论】：

您的网站是否与fxempire.com 在同一个域上运行？
javascript.info/tutorial/same-origin-security-policy
我正在尝试自动更改 src 内的以下宽度什么时候？在加载期间？调整浏览器大小？
@BenM 不，我的网站只是使用他们的网站管理员工具
@lshettyl 在加载期间

标签： javascript jquery html css iframe

【解决方案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/

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

它会在您第一次加载页面时选择源，但如果您稍后调整视口大小则不会更改它，因为您需要监听调整大小事件 (this might help)。

【讨论】：