如何使用 iframe 在模式窗口中显示内容


How to use an iframe to display content within a modal window?

我这里有一个简单的应用程序(QandATable2.php),当用户单击加号按钮时,它将打开一个模态窗口,并显示存储在另一个页面中的详细信息(previousquestions.php)。

现在我遇到的问题是,如果您在文本框为空白时立即单击"搜索"按钮,您将看到它将页面加载到自己的页面上,并在该页面上显示详细信息。这是不正确的。

我希望

它做的是,如果用户单击了搜索按钮,那么我希望详细信息存储在模态窗口中,而不是存储在其自己的整个页面上。我听说最好的解决方案是使用iframe。那么有谁知道如何使用 iframe 实现这一点?

我正在使用的模态窗口被称为SimpleModal,它的网站在这里

下面是 QandATable2.php 代码,其中显示加号按钮并打开模态窗口,将模态窗口的内容链接到上一个问题.php页面:

<script type="text/javascript">          
    function plusbutton() { 
        // Display an external page using an iframe 
        var src = "previousquestions.php"; 
        $.modal('<iframe src="' + src + '" height="100%" width="100%" style="border:0">');
        return false;
    }   
    function closewindow() {     
        $.modal.close(); 
        return false;
    }         
</script>
<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
    <tr>
        <th>
            <a onclick="return plusbutton();">
                <img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
            </a>
            <span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
        </th>
    </tr>
</table>

下面是前面的问题.php代码,它在模式窗口中显示详细信息以及存储搜索功能的位置:

<?php
    foreach (array('questioncontent') as $varname) {
        $questioncontent = (isset($_POST[$varname])) ? $_POST[$varname] : '';
    }
?>
<div id="previouslink">
    <button type="button" id="close" onclick="return closewindow();">Close</button>
    <h1>PREVIOUS QUESTIONS</h1>
    <p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>
    <form action="previousquestions.php" method="post">
          <p>Search: <input type="text" name="questioncontent" value="<?php echo $questioncontent; ?>" /></p>
          <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
    </form>
</div>
<?php 
    //...connected to DB
    if (isset($_POST['searchQuestion'])) {
        $questionquery = "SELECT QuestionContent FROM Question
              WHERE(QuestionContent = '".mysql_real_escape_string($questioncontent)."')";
        if (empty($questioncontent)){
            echo "Please enter in a phrase in the text box in able to search for a question";
        }
?>
取自

以下示例:

// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
    closeHTML:"",
    containerCss:{
        backgroundColor:"#fff",
        borderColor:"#fff",
        height:450,
        padding:0,
        width:830
    },
    overlayClose:true
});

为了满足您的需求:

function plusbutton() {
    // Display an external page using an iframe
    var src = "previousquestions.php";
    $.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
        closeHTML:"",
        containerCss:{
            backgroundColor:"#fff",
            borderColor:"#fff",
            height:450,
            padding:0,
            width:830
        },
        overlayClose:true
    });
}
让表单像

往常一样完成它的工作(这里没有事件处理程序),或者如果这不起作用,请尝试在表单的属性中添加target="_self",这可确保页面在 iframe 内打开。

否则,我建议使用 ajax 并将它们加载到普通的div 中,而不是 iframe,但这取决于你。

更新:要在评论中回答您的问题:

问题 1:模态框设置为 100% 高度和 50% 宽度,所以我设置 iframe相同,现在宽度是完美的,但iframe的Hieght没有 下降到 100%。

尝试style="width:100%;height:100%;"而不是width="100%" height="100%"(我认为在这些属性中放置百分比值是行不通的)

更新2:似乎问题不在这里,但是对于包含iframe的.simplemodel-data类,一个"hacky"解决方案是添加到您的css中:.somplemodel-data {height: 100%;}。检查文档,看看是否有"官方"的东西。

问题 2:我有一个关闭按钮,如果用户单击 "关闭"按钮,它会关闭模式窗口,但现在它不会关闭 模态窗口,它一直声明它是未定义的。

关闭按钮将不起作用,因为当您从 iframe 内部调用 closewindow 函数时,它是在父窗口中定义的。要克服这个问题,您有 2 个解决方案: 1.要么将关闭按钮放在iframe外面,其余部分保持原样 2.或者您调用父窗口的closewindow函数。

对于 1:$.modal('<button type="button" id="close" onclick="return closewindow();">Close</button><iframe src="' + src + '" style="border:0;width:100%;height:100%;">');在"QandATable.php"

对于2:<button type="button" id="close" onclick="return parent.closewindow();">Close</button>在"以前的问题.php"中(或者可能用top替换parent,我认为是一样的)

添加一个带有id('iframe')的iframe previousquestions.php并创建一个名为例如 search.php接受一个 url 参数作为搜索字符串并将您的 PHP 搜索代码放在那里。然后在表单上设置一个 javascript 事件处理程序

<form action="" onsubmit="javascript:document.getElementById('iframe').src =
  'search.php?q='+encodeURI(document.forms[0].questioncontent.value); return false;">