Question

我有一个网站，其中包含DIV中的iframe。 iframe的宽度应取决于浏览器的宽度。

因此我使用JavaScript函数和EventListener来获取浏览器的宽度。这很好。

现在我必须将确定的宽度从JavaScript传递到我的iframe并重新加载它。这是我的HTML / PHP代码，其中包含 index.html ：

的iframe

<div id="scout">
    <?php
        $iframeWidth = "<script>document.write(iframeWidthFromJS)</script>";
        echo "iframe width is " . $iframeWidth;
    ?>

    <iframe src="http://cpcms.scout" width="<?php echo $iframeWidth; ?>" height="600"></iframe>
</div>

这是我的JavaScript，它不起作用：

window.addEventListener('resize', getWindowSize);
window.onload(getWindowSize());

function getWindowSize()
{
    var iframeWidthFromJS = 800;

    if (typeof (window.innerWidth) == 'number')
    {
        // Get current browser width
        width = window.innerWidth;
        iframeWidthFromJS = width;

        alert(iframeWidthFromJS);

        // Reload the DIV to apply new iframe width
        $( "#scout" ).load(window.location.href + " #scout" );
    }
}

确定宽度有效，但不会将其传递给iframe。

Answer 1

不能简单地使用width="100%"

Answer 2

修改代码，使包含iframe的父div也获得新的宽度

<?php
            $iframeWidth = "<script>document.write(iframeWidthFromJS)</script>";
            echo "iframe width is " . $iframeWidth;
        ?>

    <div id="scout" width="<?php echo $iframeWidth; ?>">
        <iframe src="http://cpcms.scout" width="<?php echo $iframeWidth; ?>" height="600"></iframe>
    </div>

将变量从JavaScript传递到PHP并重新加载DIV / iframe

2 个答案: