使用Javascript来控制iFrame的导航，而不应用src属性

Using Javascript to control navigation of iFrame not applying src property

本文关键字：应用 src 属性 导航 Javascript 控制 iFrame 使用      更新时间：2023-09-26

所以我正在制作一个页面，它将允许我呈现外部页面，这样我就可以开始定期操作数据和刷新内容（理想情况下，不是这样）。

因此，我的问题是，我有一个小javascript来调用页面加载到我的iframe，但当我试图将我的url应用到我的iframe的src属性时，它似乎不会粘住，也没有外部页面加载。我一直在使用我自己的网站进行测试，所以不应该有来自url位置的限制来阻止它加载。我不确定页面是否需要重新加载（可能是？）以便iframe更改其src？如果是这样的话，我的想法将完全不可行，所以我希望这不是问题所在。这是我迄今为止的代码：

<head>
<style>body{text-align:center;}#targetField{width:80%;margin:3px;}</style>
<script>
var frames = new Array();
var url;
function direct(url){
  frames = document.getElementsByTagName('iframe');//Obtain all iframe elements
  for(i=0;i<frames.length;i++){//For each frame      
    //IF the frames source element is blank or null
    if(frames[i].getAttribute('src') === null || frames[i].getAttribute('src') === 'null' || frames[i].getAttribute('src') === ''){
        frames[i].setAttribute('src', url);
    }
    else if(frames[i].getAttribute('src') === url){
      //IF the souce element already has a target and is SAME as url
      if(navigator.appName == 'Microsoft Internet Explorer'){
        //If IE then use reload()
        frames[i].contentWindow.location.reload(true);
      }
      else{
        //Otherwise set source to reload
        frames[i].src = frames[i].src
      }
    }
    else{}
  }
}
</script>
</head>
<body>
<form>
  <input id="targetField"></input>
  <button onclick="direct(document.getElementById('targetField').value);" value="submit">GO!!!</button>
</form>
<iframe id="iF01"></iframe></body></html>

如果可能的话，我宁愿使用纯javascript而不使用任何jQuery，我只是不确定为什么我的调试控制台没有显示任何问题，但什么都不做。经过铬、FF和IE8测试。JSFiddle在这里http://jsfiddle.net/77tx44od/2/

我现在也尝试过，但没有成功，创建了一个新的iFrame来通过其src属性加载内容。

<script>
var frames = new Array();
var url;
var x = 0;
function direct(url){ 
  frames = document.getElementsByTagName('iframe');//Obtain all iframe elements
  for(i=0;i<frames.length;i++){//For each frame
    frames[i].parentnode.removeChild(frames[i]);
  }  
  var newFrame = document.createElement('iframe');
  newFrame.setAttribute('src', url);
  newFrame.setAttribute('id', 'iF'+x);
  document.body.appendChild(newFrame);
  x++;
}   
</script>

加载来自不同来源的页面后，您无法查询iframe中的内容，也无法由于跨来源安全性而更改其src。最好的办法是给iframe命名，然后使用window.open（URL，iframeName）。

这是一个想法，用另一个src替换一个新的iframe。

它可能会被阻止在iframe中加载页面——它很可能会试图破坏

这是一个替代版本：

小提琴

<form id="form1">
  <input id="targetField"></input>
  <button value="submit">GO!!!</button>
</form>
<div id="iframeDiv">
<iframe id="iF01"></iframe></div>
window.onload=function() {
    document.getElementById("form1").onsubmit=function() {
      document.getElementById("iframeDiv").innerHTML='<iframe src="'+this.targetField.value+'"></iframe>';
      return false; // cancel form submission
    }
}
相关文章：