javascript - 编辑 iframe 动态内容

Question

我正在尝试编辑在外部 URL 上生成的动态内容的大小。 这是我的代码:

HTML:

<div id="movie">
    <iframe name="ifr" id="ifr" src="http://zeyu.ucoz.es/directvenvio.html" width="100%" height="480" frameborder="0" scrolling="no"></iframe>
</div>

在这个源 url 中，有 2 个脚本，生成一个 iframe，

我正在尝试更改这条线的宽度和高度:

<script type='text/javascript'> 
 width=620, 
 height=382, 
 channel='zeyudirtc', 
 g='1';
</script>

这就是我正在尝试的:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#ifr').ready(function(){
        $('#ifr').contents().find('script').html('width=960, height=480, channel="zeyudirtc" ');
    });
});
</script>   

但这行不通。

可以帮帮我吗？

提前致谢。

Answer 1

如果您有权访问 iframe 源，则有可能。 您必须将 Javascript 代码添加到 iframe 内容和周围页面。

您需要在 iframe 内容中的代码应该是这样的:

首先获取iframe需要的高度。

var height = getDocHeight();
    var height = $("html").height();
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    if(msie > 0){
        height = Math.max(
        document.documentElement["clientHeight"],
        document.documentElement["scrollHeight"],
        document.body["scrollHeight"]
        );
    }

然后你要给周围的页面发消息。像这样:

parent.postMessage(height, "DomainOfTheSurroundingPage");

iframe 就是这些。

在其他站点上，您需要收听消息。

 if (window.addEventListener) {
    window.addEventListener ("message", receiveMessage, false);        
} else {
    if (window.attachEvent) {
        window.attachEvent("onmessage", receiveMessage, false);
    }
}

function receiveMessage(event)
{       
  var height = event.data; 
  do something();
}

现在您可以使用高度(以像素为单位)。 将 iframe 包装在一个 div 中。

Div
  --- iframe

然后将包装器 div 的高度设置为 0，将填充底部设置为您提交的高度。

这应该可以解决问题。

如果您无法将代码添加到 iframe 内容，那么您将无法动态编辑 iframe 的高度和宽度。