Question

在javascript中没有实例化dom Object的情况下，从普通文本获取src值的最佳方法是什么？下面是我试过的代码。请提出我缺少的内容

＆＃13;

function validate() {
  var test = document.getElementById("iframe_url").value;
  alert("==>" + test)
}

＆＃13;

<input type="text" id="iframe_url" name="iframe_url" value="<iframe   width='420' height='315'    src='https://www.youtube.com/embed/XGSy3_Czz8k'></iframe>" />
<button id="opener" onclick="validate()">Open Dialog</button>

＆＃13;

Answer 1

您可以使用src=拆分文字值，然后再按空格或>拆分以识别新属性或关闭标记

代码

function validate() {
  var test = document.getElementById("iframe_url").value;
  var src = test.split('src=')[1].split(/[ >]/)[0]
  alert("==>" + src)
}

<input type="text" id="iframe_url" name="iframe_url" value="<iframe   width='420' height='315'    src='https://www.youtube.com/embed/XGSy3_Czz8k'></iframe>" />
<button id="opener" onclick="validate()">Open Dialog</button>

解释

测试有以下字符串

 <iframe width='420' height='315' src='https://www.youtube.com/embed/XGSy3_Czz8k'></iframe>

现在string.split使用字符串或正则表达式来拆分关联的字符串。在我们的例子中，我们首先提供字符串（src=）。这将按以下方式划分字符串

["<iframe width='420' height='315'", "'https://www.youtube.com/embed/XGSy3_Czz8k'></iframe>"]

我们可以丢弃第一个条目，因为我们只想要它的价值。所以我们选择第二个条目并再次使用正则表达式进行拆分。

string = "'https://www.youtube.com/embed/XGSy3_Czz8k'></iframe>"
split value = [
  "'https://www.youtube.com/embed/XGSy3_Czz8k'",
  "</iframe>"
]

第一个值是我们需要的值。

Answer 2

要从HTML文本中检索src属性，您可以使用jQuery将其转换为Element，然后从中读取src属性：

$('#opener').click(function() {
  var $test = $($("#iframe_url").val());
  var src = $test.filter(':first').prop('src');
  console.log(src);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="iframe_url" name="iframe_url" value="<iframe   width='420' height='315'    src='https://www.youtube.com/embed/XGSy3_Czz8k'></iframe>" />
<button id="opener">Open Dialog</button>

或者你可以使用正则表达式：

$('#opener').click(function() {
  var test = $("#iframe_url").val();
  var src = /src=[\"|\'](.*)[\"|\']/gi.exec(test)[1];
  console.log(src);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="iframe_url" name="iframe_url" value="<iframe   width='420' height='315'    src='https://www.youtube.com/embed/XGSy3_Czz8k'></iframe>" />
<button id="opener">Open Dialog</button>

但是，我建议你非常谨慎地执行任何让你的用户进入网站的HTML / JS，因为你可能会对注射和XSS攻击保持开放态度。

Answer 3

如果跨域检查允许，请尝试window.frameElement.src。

否则，你运气不好，只留下location.href。

Answer 4

只需将文本值作为参数传递即可获得源值。

function validate(text) {
  var fsrc = text.split('src=')[1].split('><')[0];
  alert("=" + fsrc )
}

<input type="text" id="iframe_url" name="iframe_url" value="<iframe   width='420' height='315'    src='https://www.youtube.com/embed/XGSy3_Czz8k'></iframe>" />
<button id="opener" onclick="validate(this.previousSibling.previousSibling.value)">Open Dialog</button>

如何从javascript

4 个答案:

代码

解释