Question

我目前通过首先添加iframe来获取页面中的DOM源：

<iframe src="http://127.0.0.1/mypage.html" id="my_iframe"></iframe>

然后用javascript提取内容：

var data = $("#my_iframe").contents().find("#data");

这很好但我的问题是：

我可以做同样的事情，但在运行javascript代码之前不必在身体中使用iframe吗？

Answer 1

是的，你可以：

var iframe = document.createElement("iframe");
iframe.setAttribute("src", "http://127.0.0.1/mypage.html");
var jframe = $(iframe);
$(jframe).ready(function() {
    var data = jframe.contents().find("#data");
    // Do something with data
}

然而，除非两个页面都位于同一个域中，否则由于一个名为CORS的令人生气但又至关重要的安全措施，这注定会在生产中失败。除非您请求页面的服务器具有其CORS标题Access-Control-Allow-Origin，设置为允许您的页面从中请求内容，否则您无法执行此操作。

如果CORS不会阻止您这样做，您可以使用XMLHttpRequest API以不同方式执行此操作。

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
  var fragment = document.createDocumentFragment();
  fragment.body.innerHTML = this.responseText;
  var data = $(fragment).find("#data");
  // Do something with data
});
oReq.open("GET", "http://127.0.0.1/mypage.html");
oReq.send();

Javascript通过添加临时iframe获取DOM源代码

1 个答案: