Question

如果我有2个HTML页面并且我使用iframe在其他（父页面）内嵌入它们（子页面）我可以使用

从父级调用子进程中的函数js函数

window.parent.myfunction();

注意：不要使用chrome

我需要在visual studio灯光开关中应用它

我使用iframe将HTML页面嵌入到灯光切换屏幕中的自定义控件元素中，我想从自定义控件渲染中调用JavaScript函数，使用iframe中的按钮（onclick）...我试过window.parent.myfunction();但它没有用。

自定义控件渲染

myapp.LaunchURL.BigCustom_render = function (element, contentItem) {

    element.innerHTML += '<div id ="mycontent" style="width:100%; height: 100%;"> </div>"';
    document.getElementById("mycontent").innerHTML +=
       '<iframe src="page.html" id ="myframe" name = "myframe" style="width:100%; height:100%;"></iframe>';

    var iframe = $('iframe').contents();

    iframe.find('#h2id').text("change the text please");

    iframe.find('#A2').attr("value", "ok this works");

    myapp.activeDataWorkspace.ApplicationData.Students.load().then(
        function onComplete(result) {
            var studentNames = "";
            result.results.forEach(function (student) {
                //alert(student.Name);
                studentNames += (student.Name + " ");
            });

           // alert(studentNames);

            iframe.find('#A1').attr("type", "text");
            iframe.find('#A1').attr("value", studentNames);
        }
        );


    function AlertOnChange()
    {

        alert("the student name changes");
    }





    //to have the entire webpage
    $("iframe").parent().parent().css("width", "100%");
    $("iframe").parent().parent().css("height", "1200px");

    //to eliminate the header if you want to
    $("span").parent().parent().parent().parent().parent().css("width", "0px");
    $("span").parent().parent().parent().parent().parent().css("height", "0px");

};

HTML页面

<!DOCTYPE html>
<html>
<head>
    <title>Dating Form</title>
</head>
<body>


    <h2 id="h2id"> the students</h2>
    <br />
    <br />
    <form>

        <input type="button" value="Get Students" onclick="window.parent.AlertOnChange();"></input>
        <br />
        <br />

        <input type="hidden" id="A1" name="A1" value="hidden" onchange="window.parent.AlertOnChange()"> Students Names </input>
        <br />
        <br />

        <input type="text" id="A2" name="A2" value="text this text box"> textbox </input>


    </form>


    <script>
        //function childAlertOnChange()
        //{
        //    //window.parent.AlertOnChange();
        //}
    </script>
</body>
</html>

这个按钮没有响应，也没有做任何事情

Answer 1

我定义了自定义控件渲染之外的函数，它可以正常工作

这是我的代码

var AppData;


myapp.LaunchURL.BigCustom_render = function (element, contentItem) {

    element.innerHTML += '<div id ="mycontent" style="width:100%; height: 100%;"> </div>"';
    document.getElementById("mycontent").innerHTML +=
       '<iframe src="page.html" id ="myframe" name = "myframe" style="width:100%; height:100%;"></iframe>';

    var iframe = $('iframe').contents();

    iframe.find('#h2id').text("change the text please");

    iframe.find('#A2').attr("value", "ok this works");

    //to have the entire webpage
    $("iframe").parent().parent().css("width", "100%");
    $("iframe").parent().parent().css("height", "1200px");

    //to eliminate the header if you want to
    $("span").parent().parent().parent().parent().parent().css("width", "0px");
    $("span").parent().parent().parent().parent().parent().css("height", "0px");

};



function AlertOnChange() {
    alert("the student name changes");

    AppData.Students.load().then(
    function onComplete(result) {
        var studentNames = "";
        result.results.forEach(function (student) {
            //alert(student.Name);
            studentNames += (student.Name + " ");
        });

        // alert(studentNames);
        alert(studentNames);
        $('iframe').contents().find('#A1').attr("type", "text");
        $('iframe').contents().find('#A1').attr("value", studentNames);
    }
    );

}



myapp.LaunchURL.created = function (screen) {
    // Write code here.
    AppData = myapp.activeDataWorkspace.ApplicationData;
};

嵌入在灯光开关画面中的iframe，如何从父自定义控件元素调用java脚本函数？

1 个答案: