通过从下拉列表中选择来获取 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>

现在我希望它只加载 ID 为 cointainer1 的网页的特定部分。所有页面都有这部分。这可能吗？我通过在每个 URL 之后插入 #container1 来尝试它，但是 iframe 的内容是可滚动的，因此网页的其他部分也是如此。将其更改为不可滚动对我来说不是解决方案。任何 javascript 解决方案？提前致谢。

Answer 1

可能还有其他解决方案，但我认为您可以将每个 HTML 页面的 Container 内容加载到您的框架

按照以下步骤 JavaScript pure:

1- 应该创建一个函数来将 HTML 页面加载为 XMLHttpRequest，例如：

 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，无论如何上述解决方案都可以正常工作。

通过从下拉列表中选择来获取 iframe 中的特定网页内容

Getting specific web page content in an iframe by choosing from a dropdown list

html

javascript

iframe

getelementbyid

dropdown