Plunker（功能性）

Question

我使用SaaS应用程序，其中包含我的客户的跟踪选项，但我真的希望在我的网站上提供此信息

可以通过网址访问跟踪页面，因此在Google和此网站的帮助下，我已经能够创建自己的搜索框并在iframe中显示结果。

<iframe width="800" height="600" id="TrackingFrame" src=""></iframe>

带有脚本的搜索框......

<form onSubmit="return process123();" method="post">
<input type="text" id="TrackingNumber">
<input type="submit" value="Track">
</form>

function process123()
{
var url="http://www.3rdPartySite.com/Tracking.aspx?Number=" + document.getElementById("TrackingNumber").value + "&ID=123456";
document.getElementById("TrackingFrame").src=url;
return false;
}

除了我要删除的页面上有一个标题，并且在网址中添加＃name-of-id并不可靠以外，这种方法运行良好。

我已经设置了第二个带有第二个iframe的文档，并给div一个负余量来裁掉我不想显示的部分。

我的问题是，如何让上面的脚本修改子文档中的src？我已经尝试了一些其他答案，包括......

document.getElementById('TrackingFrame').contentWindow.document.getElementById('TrackingFrame2').src=url;

document.getElementById('TrackingFrame').innerDoc.getElementById('TrackingFrame2').src=url;

......但这些选项都没有起作用。

如果有人可以帮我指出正确的方向，我会非常感激！

Answer 1

更新

OP请求能够使用 ENTER / RETURN 键，因此按钮type现在为submit，eventListener()已更改如下：

/* Register the <form> on the submit
|| event. When user has submitted data
|| into by the [ENTER] key or clicking
|| the button, the callback function...
*/

qForm.addEventListener('submit', eventHandler);

function eventHandler(e) {         

  /* if the [ENTER] key was clicked or the
  || submit event occurs...
  */
  if (e.keycode === 13 || e.type === 'submit') {

    /* ...gets the value of the textbox
    || then invokes tracker function and
    || passes the value of the textbox.
    */
    var query = qForm.elements[0].value;
    tracker(query);
  }
  // Prevent post to server
  e.preventDefault();
}

<小时/> 这个演示只是一个部分非功能性的例子，因为出于安全原因，SO安全性禁止大多数iframe功能（我还没有考虑过它，因为90％的时间iframe不起作用，这也适用于YouTube的例子）所以我在Plunker提供了一个功能演示。网址当然是不同的，我相信你可以弄清楚如何替代你的。

详情在演示

中发表

Plunker（功能性）

演示（非功能性）

＆＃13;

<form>
  <input>
  <input type="button" value="Track">
</form>
<iframe width="90%" height="auto" id="subFrame" src="sub.html" scrolling='no' frameborder='0'></iframe>

<script>
  // Reference the <form>
  var qForm = document.forms[0];

/* Register the <form> on the submit
|| event. When user has submitted data
|| into by the [ENTER] key or clicking
|| the button, the callback function...
*/

qForm.addEventListener('submit', eventHandler);

function eventHandler(e) {         
  
  /* if the [ENTER] key was clicked or the
  || submit event occurs...
  */
  if (e.keycode === 13 || e.type === 'submit') {

    /* ...gets the value of the textbox
    || then invokes tracker function and
    || passes the value of the textbox.
    */
    var query = qForm.elements[0].value;
    tracker(query);
  }
  // Prevent post to server
  e.preventDefault();
}

  function tracker(Q) {
    /* This url is a Template Literal
    || ${Q} is a interpolated expression,
    || ${Q} is just like ' + Q + '
    || Instead of quotes ' and ", it uses
    || backticks ` (top left corner of 
    || keyboard)
    */
    var url = `http://vocaroo.com/media_command.php?media=${Q}&command=download_mp3`;

    /* Reference the iframe's document with
    || the .contentDocument property
    */
    var iSub = document.getElementById('subFrame').contentDocument;

    /* Reference the 2nd iframe by the
    || reference of the iframe document
    */
    var iTrkFrame = iSub.getElementById('trkFrame');

    // Set the .src property to url value
    iTrkFrame.src = url;
    return false;
  }
</script>

<!--===================[sub.html]========================

  <iframe width="90%" height="auto" id="trkFrame" src="about:blank" scrolling='no' frameborder='0'></iframe>
  
=======================================================-->

＆＃13;

如何修改iframe中的src？

1 个答案:

更新

Plunker（功能性）

演示（非功能性）