Javascript 创建新的DOM节点而不是重新渲染_Javascript_Html_Reactjs_Iframe

Javascript 创建新的DOM节点而不是重新渲染

javascript html reactjs iframe

Javascript 创建新的DOM节点而不是重新渲染,javascript,html,reactjs,iframe,Javascript,Html,Reactjs,Iframe,我使用的是一个iframe组件，它加载通过props传递的跨源url。通过道具将iframe导航到一个新的url会将一个新条目推到iframe的历史记录中，这会劫持浏览器的“后退”按钮。这是跨源iFrame在其src url更改时的预期行为那么，是否可以简单地创建一个新的iframe而不是更改src？我的假设是，这将破坏iframe具有的任何内部状态，从而阻止新条目进入“后退”按钮的历史记录 iframe组件（改编自）： ETA：我假设创建一个新的基础iframe将阻止历史记录的输入，其内容如

我使用的是一个iframe组件，它加载通过

props

传递的跨源url。通过道具将iframe导航到一个新的url会将一个新条目推到iframe的历史记录中，这会劫持浏览器的“后退”按钮。这是跨源iFrame在其src url更改时的预期行为

那么，是否可以简单地创建一个新的iframe而不是更改src？我的假设是，这将破坏iframe具有的任何内部状态，从而阻止新条目进入“后退”按钮的历史记录

iframe组件（改编自）：

ETA：我假设创建一个新的基础iframe将阻止历史记录的输入，其内容如下：

不更改src，只使用新的iframe替换旧的iframe？没有历史记载。同样的功能。人人都赢


iframe{
宽度：300px；
高度：300px；}
变量URL=[”http://bing.com", "http://google.com",
"http://duckduckgo.com"];
函数next（）{
if（url.length==0）返回；
var original=document.getElementsByTagName（“iframe”）[0]；
var newFrame=document.createElement（“iframe”）；
newFrame.src=url.pop（）；
var parent=original.parentNode；
parent.replaceChild（newFrame，original）；}
接下来，让我们测试一些iframe

在这种情况下，您应该使用

组件，而不是PureComponent
，或者使用forceupdate
方法
PureComponent
通过一个浅属性和状态比较来实现shouldComponentUpdate（）
，这导致组件无法重新渲染。
在这种情况下，您应该使用组件而不是PureComponent
，或者使用forceupdate
方法
PureComponent
实现了shouldComponentUpdate（）
，并进行了浅层的道具和状态比较，这导致您的组件无法重新渲染。
谢谢@Dekel。我将其更改为组件
，但“后退”按钮仍在浏览iframe的历史记录，而不是父页面。我是否错误地认为创建一个新的底层iframe将阻止iframe的历史记录积累条目？我认为这与反应完全无关——这是浏览器处理iframe的方式。您是否未使用react应用程序进行检查？：）我没有直接检查它，但我的假设是基于这篇文章的答案（我将添加到OP中）：我恐怕答案是“否”：（这里是一个例子，但因为有多个层次的iFrame-这里是如何检查它的说明。1.单击下一步（你将得到duckduckgo）.2.搜索内容。3.单击“下一步”（您将获得绑定）。4.在“结果”iframe内（绑定iframe外）用鼠标单击。单击“上一步”在浏览器中-您可以返回iframe内部。谢谢@Dekel。我将其更改为组件，但“后退”按钮仍在导航iframe的历史记录，而不是父页面。我是否错误地认为创建新的基础iframe将阻止iframe的历史记录积累条目？我认为这没有关系要做出反应——这是浏览器处理iFrame的方式。你不是用react应用程序检查的吗？：）我没有直接检查，但我是根据这篇文章中的答案（我将添加到OP中）来假设的：恐怕答案是“否”：（这里是一个例子，但因为有多个iframe层-这里是如何检查它的说明。1.单击下一步（您将获得duckduckgo）。2.搜索内容。3.单击“下一步”（您将获得绑定）。4.在“结果”iframe内（绑定iframe外）单击鼠标。单击“上一步”在浏览器中-您将返回iframe内部。
// ETA: using React.Component instead of 
// PureComponent yields the same back button behavior
const Iframe = class extends PureComponent {
    render() {
        return React.createElement('iframe', {
            ref: 'iframe',
            frameBorder: '0',
            src: this.props.url,
            sandbox: this.props.sandbox,
            referrerpolicy: 'no-referrer',
            target: '_parent',
            allowFullScreen: this.props.allowFullScreen || false,
            style: Object.assign(
                {},
                {
                    position: this.props.position || 'absolute',
                    display: this.props.display || 'block',
                    height: this.props.height || '100%',
                    width: this.props.width || '100%'
                },
                this.props.styles || {}
            ),
            height: this.props.height || '100%',
            width: this.props.width || '100%'
        });
    }
};

 <!doctype html>

 <style> iframe {
     width: 300px;
     height:300px; } </style>

 <script> var urls = ["http://bing.com", "http://google.com",
 "http://duckduckgo.com"];

 function next() {
     if(urls.length==0) return;
    var original = document.getElementsByTagName("iframe")[0];
     var newFrame = document.createElement("iframe");
     newFrame.src = urls.pop();
     var parent = original.parentNode;
     parent.replaceChild(newFrame, original); } </script>

 <p>let's test some iframes</p> <button onclick="next()">next</button>
 <iframe />