javascript - 在 iframe HTML 中使用查询字符串

Question

我有一个 iframe 源，其高度和宽度值需要根据查询字符串进行更改，如下所示：

<iframe width="(value1)" height="(value2)" scrolling="no" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" src="http://mips.tv/embedplayer/test121/1/(value1)/(value2)"></iframe>

我想要这样的网址：

mywebpage.com/something.html?width=(value1)&height=(value2)

请帮帮我，我已经找了好几个星期了

Answer 1

如果您只能使用 javascript，则使用此函数读取宽度和高度值：

// return value of key_str variables query string of url
// Example: url = "index.html?alert=5&page=index"; if key_str = "alert" then it returns "5"
function getQuery(key_str) {
    if(window.location.search) {
        var query = window.location.search.substr(1);
        var pairs = query.split("&");
        for(var i = 0; i < pairs.length; i++) {
           var pair = pairs[i].split("=");
           if (unescape(pair[0]) == key_str) return unescape(pair[1]);
        }
      return null;
    }
}

然后你可以很容易地使用 jQuery/javascript 来调整 iFrame 的属性：http://api.jquery.com/attr/#attr2。

编辑：好的，试试这个。为您的 iFrame 命名（以下示例中的“myiframe”）：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript'>
function getQuery(key_str) {
    if(window.location.search) {
        var query = window.location.search.substr(1);
        var pairs = query.split("&");
        for(var i = 0; i < pairs.length; i++) {
           var pair = pairs[i].split("=");
           if (unescape(pair[0]) == key_str) return unescape(pair[1]);
        }
      return null;
    }
}

var width = getQuery('width');
var height = getQuery('height');
var src = 'http://mips.tv/embedplayer/test121/1/' + width + '/' + height;
$(document).ready(function() {
    var f = $('iframe[name=myiframe]');
    f.attr({
          'width'  : width,
          'height' : height,
          'src'    : src
      }
    );
});
</script>