AJAX 发布 HTML 代码

Question

我在使用 AJAX 发送一些 HTML 代码时遇到问题，请在下面查看我的代码

<iframe src="http://www.w3schools.com" width="10" height="10" id="awc_frame"></iframe>
<script>var iframe = document.getElementById("awc_frame");</script>

下面是 AJAX 代码

<script> 

    $.ajax({
        type: "POST",
        url: "mobileView.php",
        data: { val : iframe },
        success: function(data){
            console.log(data); 
        }
    })
</script>

代码没有将变量发送到 PHP 文件。查看它发送文本的网络端，即如果我在 iframe 周围放置“”，它会发送此代码 "val = iframe" 但不是 iframe 中的实际代码。 “var iframe”确实起作用并拉回了 iframe 的 HTML 代码

请告诉我我做错了什么。

提前致谢。

编辑：对不起。这不是我需要发送的 iFrame 中的 HTML 代码，而是我需要发送的整个 iFrame 代码。

另一个编辑：当我公司的访问者访问我的网站时，我想要完成什么我希望 Javascript 或 Jquery 从访问者的计算机加载一个内部网站，然后从中获取所有代码将客户端上的网站发送到服务器，服务器将整个 iFrame 代码存储在数据库中。

Answer 1

这会将整个 html 发送到 iframe 中。

var iframe = $('#awc_frame').html();

Answer 2

首先，var iframe 不包含 iframe 元素的 HTML - 它包含一个 DOM 节点，它是 iframe 元素的一种包装器（它包含该元素的各种属性，包括 HTML）。 接下来，您可能希望等待 iframe 完全加载所有内容，因此您必须绑定到它的 load 事件。

这样的事情应该可以工作：

var $iframe = $("#awc_frame");

$iframe.on("load", function () {
    var iframeHTML = $iframe[0].contentWindow.document.body.innerHTML;
    // jQuery alternative
    var iframeHTML = $iframe.contents().find("body").html();

    $.ajax({
        type: "POST",
        url: "mobileView.php",
        data: {
            val: iframeHTML
        },
        success: function(data){
            console.log(data);
        }
    });
});

在这个例子中超级重要的事情

还有一件事 - 请注意，对于您自己域之外的网站，此代码将不起作用（由于同源政策）。任何其他代码也不起作用。

Answer 3

由于 javascript 在从跨域 iframe 获取 HTML 方面存在问题，因此您无法跨域执行此操作。但是，为什么不直接将 iframe 的 src 属性发送到 PHP 页面，然后只使用 file_get_contents 获取 HTML，然后存储呢？问题解决：

Javascript：

var iframe = $('#awc_frame').prop('src');

$.ajax({
    type: "POST",
    url: "posttest.php",
    data: { val : iframe },
    success: function(data){
        console.log(data); 
    }
});

PHP：

$html = file_get_contents($_POST['val']);

Answer 4

你想做什么？

var iframe = document.getElementById("awc_frame");

上面的代码是你的 iframe 的一个 javascript 对象，它包含很多属性。因为你使用的是 jQuery，你可以通过以下方式得到它：

var iframe = $('#awc_frame');

请记住，上面的代码是它自己在 jquery 对象格式中的元素，你可以像这样得到元素对象：

var iframe = $('#awc_frame')[0];

** 你做错了什么。

如果您尝试获取 iframe HTML 内容：

var iframe_contents = $("#awc_frame").contents();

如果您详细说明您要做什么，我可以更新我的答案以适合您。

* 更新 * 考虑到你想要做什么..

方法#1：（简单方法）

您可以使用 php 来获取您需要的网站内容：

<?php
    $contents = file_get_contents('http://www.w3schools.com');
    // Saving $contents to database...
?>

方法#2：（硬方式）

正如@mdziekon 所说，你首先应该等到你的 iframe 被加载然后：

var iframe = $("#awc_frame");

iframe.on("load", function () {
    var contents = $(this)[0].innerHTML;

    $.ajax({
        type: "POST",
        url: "mobileView.php",
        data: {
            val: contents
        },
        success: function(data){
            console.log(data);
        }
    });
});

希望它能解决你的问题