如何通过Javascript在另一个html页面中显示HTML表单?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (398)

我有两个单独的html文件,第一个是主页:

第二个是属性面板,每当工具从左侧的工具箱中拖到画布上时,该面板就需要出现在上面页面的画布的右侧。

我之前是这样做的,将属性面板表单作为与邮件页相同的html页面的一部分(第一个图像)。

但是,由于还有其他各种表单/属性面板,所以我想将其提取到不同的html表单中,并调用它们在jsGold.js文件中显示在这个位置(右侧)。

文件结构如下:

该StreamProperty.html以下形式保存Properties Panel窗体

<head>
<link rel="stylesheet" type="text/css" href="../../CSS/style.css">
<link rel="stylesheet" type="text/css" href="../../CSS/propertybox.css">
</head>
<body>

<div style="float: left">
    <h1 class="toolbox-titlex" id="tth">Properties Panel</h1>
    <form class="panel"  id="lot">
        <label>Stream Type:</label>
        <div class="panel-switch">
            <input type="radio" name="TypeGen" value="G" id="type_g" class="panel-switch-input" checked>
            <label for="type_g" class="panel-switch-label">Import</label>
            <input type="radio" name="TypeGen" value="A" id="type_a" class="panel-switch-input">
            <label for="type_a" class="panel-switch-label">Export</label>
            <input type="radio" name="TypeGen" value="B" id="type_b" class="panel-switch-input">
            <label for="type_b" class="panel-switch-label">Temporary</label>
        </div>
        <input type="text" class="panel-input-streamName" placeholder="Stream Name">
        <input type="text" class="panel-input-streamDef" placeholder="Stream Definition">
        <input type="button" value="Save" class="panel-button">
        <input type="reset" value="Reset" class="panel-button-reset">
        <input type="button" value="Cancel" class="panel-button-cancel">
    </form>
</div>
</body>

我需要在下面的位置通过JavaScript显示这个表单。因为这里没有按钮点击,而只是一个jsPlumbDrop,所以我不确定如何完成这个操作。

jsGold.js

$("#container").droppable({
      accept: '.project, .query',
      containment: 'container',
      /**
       *
       * @param e --> original event object fired/ normalized by jQuery
       * @param ui --> object that contains additional info added by jQuery depending on which interaction was used
       * @helper clone
       */
      drop: function(e, ui) {
          var dropElem = ui.draggable.attr('class');
          alert('drop element: ' + dropElem);
          droppedElement = ui.helper.clone();
          //jsPlumb doesn't support jQuery cloneUI method.
          //So once the icon is dragged and dropped on the canvas, the clone UI class will be removed
          ui.helper.remove();
          $(droppedElement).removeAttr("class");
          // repaint --> Recompute and position all the connections
          jsPlumb.repaint(ui.helper);
          //Add the 'pro' class which has the same styling as the 'project' class but differs in functionality
          //This avoids the duplication of another project class when one project class is being dragged and dropped
          if (dropElem == "project ui-draggable") {
            var newAgent = $('<div>').attr('id', i).addClass('pro');
            //Reset Property fields
            $("#lot")[0].reset();
            //Display the Properties panel when the element is Clicked
            $(".toolbox-titlex").show();
            $(".panel").show();
          } else {
            var newAgent = $('<div>').attr('id', i).addClass('que');
            alert("que added");
          }

          //Reset Property fields
          $("#lot")[0].reset();

在上面的文件中,我需要一个替代方案,而不是上面文件中的下面一行。

//Display the Properties panel when the element is Clicked
$(".toolbox-titlex").show();
$(".panel").show();
提问于
用户回答回答于

你可以使用框架标记在另一个html中显示一个html表单:

<!DOCTYPE html>
<html>

<frameset cols="100%">
  <frame src="form_a.htm">
</frameset>

</html>

扫码关注云+社区

领取腾讯云代金券