Question

我正在尝试根据内容大小重新调整iframe的大小。经过大量的谷歌搜索，我发现了一种方法来使用网址中的哈希标签来执行它。Here is the link to the reference document。我收到的错误如TypeError: frameId is undefined。我怀疑我的guest或原始页面将frameId返回为null。为什么会这样？

我在localhost中测试它。我使用两个Yii站点进行测试。

这是我的框架视图。

<?php

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/frame.js');?>

<script type="text/javascript">

window.onload = function(event) {
    window.setInterval(publishHeight, 300);
}


  </script>
  <div>
  <div><?php echo CHtml::button('Book Now', array('submit' => array('controller/action','param1'=>$param1,'param2'=>$param2))); ?></div>

我的主页就像这样

<?php
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl .  '/js/FrameManager.js');?>
<iframe src="http://localhost/mysite/controller/action?param1=7&param2=20" frameborder="0"scrolling="no" onload="FrameManager.registerFrame(this)"></iframe>

这是我的frame.js

function publishHeight() {

if (window.location.hash.length == 0) return;

var frameId = getFrameId();

if (frameId == '') return;

var actualHeight = getBodyHeight();
var currentHeight = getViewPortHeight();

if  (Math.abs(actualHeight - currentHeight) > 15) {
    var hostUrl = window.location.hash.substring(1);

    hostUrl += "#";
    hostUrl += 'frameId=' + frameId;
    hostUrl += '&';
    hostUrl += 'height=' + actualHeight.toString();

    window.top.location = hostUrl;
}
}

function getFrameId() {

var qs = parseQueryString(window.location.href);
var frameId = qs["frameId"];

var hashIndex = frameId.indexOf('#');

if (hashIndex > -1) {
    frameId = frameId.substring(0, hashIndex);
}

return frameId;

}

function getBodyHeight() {

var height,
    scrollHeight,
    offsetHeight;

if (document.height) {

    height = document.height;

} else if (document.body) {

    if (document.body.scrollHeight) {
        height = scrollHeight = document.body.scrollHeight;
    }

    if (document.body.offsetHeight) {
        height = offsetHeight = document.body.offsetHeight;
    }

    if (scrollHeight && offsetHeight) {
        height = Math.max(scrollHeight, offsetHeight);
    }
    }

return height;
}

function getViewPortHeight() {

var height = 0;

if (window.innerHeight) {
    height = window.innerHeight - 18;
} else if ((document.documentElement) && (document.documentElement.clientHeight)) {
    height = document.documentElement.clientHeight;
} else if ((document.body) && (document.body.clientHeight)) {
    height = document.body.clientHeight;
}

return height;

}

function parseQueryString(url) {

url = new String(url);

var queryStringValues = new Object(),
    querystring = url.substring((url.indexOf('?') + 1), url.length),
    querystringSplit = querystring.split('&');

for (i = 0; i < querystringSplit.length; i++) {
    var pair = querystringSplit[i].split('='),
        name = pair[0],
        value = pair[1];

    queryStringValues[name] = value;
  }

return queryStringValues;

 }

这是我的FrameManager.js

var FrameManager = {

currentFrameId : '',
currentFrameHeight : 0,
lastFrameId : '',
lastFrameHeight : 0,
resizeTimerId : null,

init: function() {

    if (FrameManager.resizeTimerId == null) {

        FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames,   500);

    }

},

resizeFrames: function() {

    FrameManager.retrieveFrameIdAndHeight();

    if ((FrameManager.currentFrameId != FrameManager.lastFrameId) ||   (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight)) {

        var iframe = document.getElementById(FrameManager.currentFrameId.toString());

        if (iframe == null) return;

        iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";

        FrameManager.lastFrameId = FrameManager.currentFrameId;
        FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
        window.location.hash = '';

    }

   },

   retrieveFrameIdAndHeight: function() {

    if (window.location.hash.length == 0) return;

    var hashValue = window.location.hash.substring(1);

    if ((hashValue == null) || (hashValue.length == 0)) return;

    var pairs = hashValue.split('&');

    if ((pairs != null) && (pairs.length > 0)) {

        for(var i = 0; i < pairs.length; i++) {

            var pair = pairs[i].split('=');

            if ((pair != null) && (pair.length > 0)) {

                if (pair[0] == 'frameId') {

                    if ((pair[1] != null) && (pair[1].length > 0)) {

                        FrameManager.currentFrameId = pair[1];
                    }
                } else if (pair[0] == 'height') {

                    var height = parseInt(pair[1]);

                    if (!isNaN(height)) {

                        FrameManager.currentFrameHeight = height;
                        FrameManager.currentFrameHeight += 15;

                    }
                }
            }
        }
    }

},

registerFrame: function(frame) {

    var currentLocation = location.href;
    var hashIndex = currentLocation.indexOf('#');

    if (hashIndex > -1) {

        currentLocation = currentLocation.substring(0, hashIndex);
    }

    frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' +  currentLocation;

}
};

window.setTimeout(FrameManager.init, 300);

Answer 1

我发现了问题。问题出在我的parseQueryString函数和我的主机url上。实际上为了获得frameId，我需要不同地查询字符串，因为我的url包含的参数与参考中给出的url相比更多。所以我需要像这样改变ParseQueryString函数

querystring = url.substring((url.indexOf('?') + 22), url.length),

最终会给我的frameId。真正的问题是我对java脚本的了解不足。无论如何得到了答案。谢谢大家。

FrameId未定义

1 个答案: