浏览器在使用 jQuery 更改某些 iframe src 属性时崩溃

Question

我得到了这些页面：

• http://fiddle.jshell.net/Frondor/2wdauscv/show/light/（主）
• http://fiddle.example.com/iframe1 (iframe)
• http://fiddle.example.com/iframe2 (iframe)
• http://fiddle.example.com/iframe3 (iframe)

我希望能够通过操纵 jQuery 的 src 属性来更改在“ma​​ster”处显示的 iframe。

我在这里试过了：

http://jsfiddle.net/Frondor/86960cyw/

但每次我尝试使用表单时，我的浏览器 (chrome) 崩溃。这真的很奇怪！因为我尝试过使用其他一些 iframe，它似乎工作正常：

http://jsfiddle.net/Frondor/2wdauscv/

我知道我可能正在处理同源策略，但我正在尝试找出解决方法，因为我可以访问 iframe 源代码，我可以设置一个标题或其他东西以允许我的“主”页面使用 jQuery 更改 iframe。

---

现在我认为同源策略与它无关，因为我真的可以在this 示例上做我想做的事。我真的很困惑

Answer 1

如 cmets 中所述。您可以只使用 .load() 将页面加载到 div 中，而不是使用 iframe。

HTML

<form action="#">
    <select name="changeIframe" id="select">
        <option value="cafeteria">cafeteria</option>
        <option value="confiteria">confiteria</option>
        <option value="pasteleria">pasteleria</option>
    </select>
</form>
<div id="container"></div>

jQuery

$(document).ready(function () {
$( "#container" ).load( "http://lordfede.byethost13.com/ferreteria.php" ); //Load the first "iframe" page
    $('#select').on("change", function (e) {
        var iframe = "http://lordfede.byethost13.com/" + $(this).val() + ".php";        
        e.preventDefault();
        $( "#container" ).load( iframe );
    });
});