前端 | iframe框架标签应用（三）| 点击指定部分，进行外部页面搜索，内置iframe返回搜索结果

文章目录

📚实现效果
📚模块实现解析

📚实现效果

点击单词列表内的任意单词↓
弹出对应单词的搜狗翻译搜索结果，点击关闭按钮关闭界面。

📚模块实现解析

在列表框搜索功能的基础上加一个click触发效果就好了，也就是说，在对应js文件里加上下述内容↓

function openSouGouSearch(word) {
    const existingIframe = document.querySelector('iframe');
    const existingCloseButton = document.querySelector('.close-button');

    if (existingIframe) {
        document.body.removeChild(existingIframe);
    }
    if (existingCloseButton) {
        document.body.removeChild(existingCloseButton);
    }

    const iframe = document.createElement('iframe');
    iframe.src = `https://fanyi.sogou.com/text?keyword=${encodeURIComponent(word)}`;
    iframe.style.position = 'fixed';
    iframe.style.top = '10%';
    iframe.style.left = '10%';
    iframe.style.width = '80%';
    iframe.style.height = '85%';
    iframe.style.border = '2px solid #bfc1a9';
    iframe.style.zIndex = '9999';
    iframe.style.borderRadius = '10px'; 
    document.body.appendChild(iframe);

    // 添加关闭按钮
    const closeButton = document.createElement('button');
    closeButton.textContent = '×';
    closeButton.classList.add('close-button');
    closeButton.style.position = 'fixed';
    closeButton.style.width = '20px';
    closeButton.style.height = '20px';
    closeButton.style.top = '8%';
    closeButton.style.right = '8%';
    closeButton.style.zIndex = '10000';
    closeButton.style.border = '1.2px solid #bfc1a9';
    closeButton.style.borderRadius = '50%'; 
    closeButton.style.fontFamily = 'serif';
    closeButton.style.fontSize = '15px';
    closeButton.style.color = 'white';
    closeButton.style.fontWeight = 'bold';
    closeButton.style.padding = '2px';
    closeButton.style.backgroundColor = '#d24735';
    closeButton.addEventListener('click', () => {
        document.body.removeChild(iframe);
        document.body.removeChild(closeButton);
    });
    document.body.appendChild(closeButton);
}

// 点击搜索结果触发打开搜狗搜索功能
document.getElementById('searchList').addEventListener('click', function(event) {
    const clickedElement = event.target;
    if (clickedElement.tagName === 'LI') {
        const word = clickedElement.innerHTML.split(' - ')[1];
        openSouGouSearch(word);
    }
});

解析点击操作对应的目标单词： const word = clickedElement.innerHTML.split(' - ')[1];
访问对应链接，其中encodeURIComponent()对word进行编码转换，以将其用作URL的一部分，使其能够在网络上进行安全传输。
```
iframe.src = `https://fanyi.sogou.com/text?keyword=${encodeURIComponent(word)}`;
```
整体的iframe框架其实就是喵喵大王立大功里白噪音喇叭页面导入的套用。

排除连续点击单词多个iframe框架堆叠问题（也就是说如果没点关闭就又点击了新的单词，旧单词对应的搜索页面自动关闭）

if (existingIframe) {
    document.body.removeChild(existingIframe);
}
if (existingCloseButton) {
    document.body.removeChild(existingCloseButton);
}