通过从下拉列表中进行选择，在iFrame中获取特定的网页内容

Question

我有这样的下拉列表：

<form name="change">
 <SELECT NAME="options" ONCHANGE="document.getElementById('frame1').src = this.options[this.selectedIndex].value">
  <option value="">Choose</option>
  <option value="stuff1.html">Stuff1</option>
  <option value="stuff2.html">Stuff2</option>
  <option value="stuff3.html">Stuff3</option>
 </SELECT>
</form>

通过从列表中选择一个：

，将网页加载到iframe上

<iframe class="iframe" id="frame1" src="" scrolling="yes" frameborder="0"></iframe>

现在，我希望它仅加载网页的特定部分，该网页具有称为COINTAINER1的ID。所有页面都有此部分。这可能吗？我通过在每个URL之后插入＃contail1来尝试一下，但是iframe的内容是可滚动的，因此网页的其他部分也是如此。将其更改为不可滚动不是我的解决方案。有JavaScript解决方案吗？预先感谢。

Answer 1

可能还有其他解决方案可以做到这一点，但是我认为您的cat load Container每个HTML页面的内容

按照JavaScript纯净的步骤：

1-应以XMLHttpRequest的形式加载HTML页面的功能：

 var getHTML = function (url, callback) { 
        if (!window.XMLHttpRequest) return;  
        var xhr = new XMLHttpRequest();  
        xhr.onload = function () {
            if (callback && typeof (callback) === 'function') {
                callback(this.responseXML);
            }
        } 
        xhr.open('GET', url);
        xhr.responseType = 'document';
        xhr.send();
    };

2-函数来处理您的选项更改事件，并通过传递select值来调用getHTML，例如：

  function loadFram() {
        var src = document.getElementById("opt1").value;
        getHTML(src, function (response) {
            var x = document.getElementById("frame1");
            var y = (x.contentWindow || x.contentDocument);
            if (y.document)y = y.document;
            y.body.innerHTML = response.documentElement.querySelector('[id="Container"]').innerHTML;
        });
    }

3-我认为您的html代码是这样的，或者是这样：

<form name="change">
    <SELECT id="opt1" NAME="options"  onchange="loadFram()"  >
        <option value="">Choose</option>
        <option value="stuff1.html">Stuff1</option>
        <option value="stuff2.html">Stuff2</option>
        <option value="stuff3.html">Stuff3</option>
    </SELECT>
</form>
<iframe class="iframe" id="frame1" src="" scrolling="yes"   frameborder="0"></iframe>

尝试一下，您会看到一切正常。

，但是您可以通过jQuery通过$.get或$.ajax的简化步骤来完成此操作。

 $('#opt1').change(function () {  
            var src = $(this).val(); 
            $.get(src, function (data) {
                var stuffContainer = document.createElement('div');
                stuffContainer.innerHTML = data;
                $('#frame1').contents().find('body').html($(stuffContainer).find('#Container').html());
            }); 
        }) ;

如果您想使用jQuery，请务必从HTML中删除onchange="loadFram()"。

或 $.ajax喜欢：

 $(function () {
            $('#opt1').change(function () { 
                var src = $(this).val();
                $.ajax({
                    url: src,
                    dataType: 'html',
                    success: function (response) {
                        var stuffContainer = document.createElement('div');
                        stuffContainer.innerHTML = response;
                        $('#frame1').contents().find('body').html($(stuffContainer).find('#Container').html());
                    }
                });
            });
        });

我更喜欢由JavaScript Pure提供解决方案，因为您没有标记jQuery，无论如何上述解决方案都可以正常工作。