我很难搞清楚如何从外页访问iframe中加载的页面.这两个页面都是本地文件,而我正在使用Chrome.
我有一个外页和许多内页.外部页面应始终显示内部页面的页面标题(在我的应用程序中有意义,在这个精简的示例中可能更少).这在AppJS中没有任何问题,但我被要求直接在浏览器中使这个应用程序工作.我收到错误" Blocked a frame with origin"null"来访问一个原始"null"的帧.协议,域和端口必须匹配. "
我认为这是由于Chrome与本地文件的原始政策相同,但这并没有帮助我直接解决问题.我可以通过在每种方法中使用window.postMessage方法绕过同一起源策略来解决这个简化示例中的问题.但是,超越这个例子,我还想从外页操作内页的DOM,因为这会使我的代码更清晰 - 所以发布消息将不会完成这项工作.
外页
<!DOCTYPE html>
<html>
<head>
<meta name="viewport">
</head>
<body>
This text is in the outer page
<iframe src="html/Home.html" seamless id="PageContent_Iframe"></iframe>
<script src="./js/LoadNewPage.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
内页
<!DOCTYPE html>
<html>
<head>
<title id="Page_Title">Home</title>
<meta name="viewport">
</head>
<body>
This text is in the inner page
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
JavaScript的
var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow;
var pageTitleElement = iFrameWindow.$("#Page_Title");
Run Code Online (Sandbox Code Playgroud)
每它是可能的Chrome支持contentWindow/contentDocument的未来版本时加载的iFrame从本地的HTML文件的本地HTML文件?,我尝试用旗帜启动Chrome
--allow-file-access-from-files
Run Code Online (Sandbox Code Playgroud)
但结果没有变化.
每次在Chrome中禁用相同的来源政策,我尝试使用旗帜启动Chrome
--disable-web-security
Run Code Online (Sandbox Code Playgroud)
但结果再没有变化.
我在一个HTML页面上有多个单选按钮组,对于每个组,我想要检查第一个按钮.当我在HTML中设置它时,选中的样式仅应用于第二组中的按钮.
<fieldset data-role="controlgroup" data-mini="false" data-type="horizontal">
<input type="radio" name="radio-choice" id="A_AM_RadioButton" checked="checked"/>
<label for="A_AM_RadioButton" id="A_AM_RadioButtonLabel">AM</label>
<input type="radio" name="radio-choice" id="A_PM_RadioButton"/>
<label for="A_PM_RadioButton" id="A_PM_RadioButtonLabel">PM</label>
</fieldset>
<fieldset data-role="controlgroup" data-mini="false" data-type="horizontal">
<input type="radio" name="radio-choice" id="B_AM_RadioButton" checked="checked"/>
<label for="B_AM_RadioButton" id="B_AM_RadioButtonLabel">AM</label>
<input type="radio" name="radio-choice" id="B_PM_RadioButton"/>
<label for="B_PM_RadioButton" id="B_PM_RadioButtonLabel">PM</label>
</fieldset>
Run Code Online (Sandbox Code Playgroud)
当我从HTML中留下"checked"属性并尝试在我的JS文件中应用该属性时,如下所示,我得到相同的结果.
$("#A_AM_RadioButton").attr("checked",true);
$("#B_AM_RadioButton").attr("checked",true);
$("input[type='radio']").checkboxradio("refresh");
Run Code Online (Sandbox Code Playgroud)
我可以理解,JQuery Mobile不希望检查字段集中的多个按钮,而是跨字段集?
如果有人可能能够告诉我我的错误(或者我正在尝试的是什么),我将不胜感激.谢谢!