7

我有一个页面https://dev.leadformly.com/datepicker有一个 iframe 在那个特定的''中，我正在通过以下代码通过 ajax 调用动态编写 HTML 代码。

<script>
  $(document).ready(function(){
    $.post(URL,
        function (data) { //here it retruns the HTML code
          $("body").html('<iframe style="width:100%;height:384px;"></iframe>');
          $("body iframe")[0].contentDocument.write(data.democode);
        },
        'json'
      );
    });
</script>

现在，当我单击日期选择器时，它会在控制台中引发错误，例如：

Uncaught TypeError: Cannot read property 'top' of undefined

你能帮我解决这个问题吗？或者只是解释原因，以便帮助我解决它

4

3 回答 3

12

您收到此错误是因为您试图从包含它的父级访问DOMan的内部。来自父级的“点击”事件无法调用子级内的元素。iFrameDOMDOMiFrame

请问您为什么iFrame在这种情况下尝试使用 an ？我几乎可以向你保证，最好不要使用它。

于 2017-07-24T04:46:55.673 回答
3

您拥有的最后一个选择是尝试使用沙盒属性。

allow-scripts: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.

https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe

如果这不起作用，请远离 iframe。iframe 元素被创建为沙盒环境，当您打开允许脚本时，很容易出现非常高的安全风险。如果您删除沙盒，则放入 iframe 中的生成的网页/外部站点可以做任何事情......从获取凭据、cookie、访问等几乎任何事情。

如果你想在其内容中访问 DOM，强烈不推荐使用 iframe。如果完全或部分隔离是您唯一关心的问题，请尝试使用 Web 组件的隔离方法：

https://developer.mozilla.org/en-US/docs/Web/Web_Components

于 2017-07-24T05:48:05.603 回答
3

我认为 jQuery 无法读取 iframe 元素，这就是它显示 无法读取未定义错误的属性顶部的原因。

id="ifreame"在 iframe 元素中使用它应该可以工作。

<iframe id="ifreame" style="width:100%;height:384px;"></iframe>

jQuery

$("body #iframe")[0].contentDocument.write(data.democode);
于 2017-07-24T05:36:53.113 回答