私はインターウェブを調べて、私がやりたいことに関連するかなりの答えを見つけました。たとえば、
Javascript-iFrame内から要素を取得
するJavascriptを使用してiframe要素にアクセスするにはどうすればよいですか?
JavaScriptでiframe要素にアクセスする
適切な結果はありません。
現在、iFrameにテストボックスがあります。親から、テキストボックスの値を取得する必要がありますonBlur()
。
私は現在使用しています。
alert("before");
var iframe = document.getElementById('GeneralInformationPrivate.aspx');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
//innerDoc.getElementById("imageLoc").hide();
alert("after");
コメント付きの行では、両方のアラートが表示されます。コメントなしでは、それほど遠くにはなりません。
(私はテストとしてそれを隠しています-これはうまくいきません)。
誰かが私を正しい方向に向けることができますか?
編集 ロードされたiFrameHTMLは次のようになります。
<iframe id="GeneralInformationPrivate.aspx" class="iframetab" src="GeneralInformationPrivate.aspx"><!-- Controls Here --></iframe>
編集2iFrameはそのように読み込まれます。(親で)
<div style="float: right; width: 570px;">
<div id="tabs">
<ul style="">
<li><a class="tabref" href="#tabs-1" rel="GeneralInformationPrivate.aspx">General</a></li>
<li><a class="tabref" href="#tabs-2" rel="www.google.co.za">Friends</a></li>
<li><a class="tabref" href="#tabs-3" rel="">Challenges</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</div>
ドキュメントの読み込み時(まだ親にあります)
// ++ IFRAME TABS
var $tabs = $('#tabs').tabs(); //Set the tab
//Loads the initial tab
function getSelectedTabIndex() {
return $tabs.tabs('option', 'selected');
}
beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");
//Send the correct data to load
loadTabFrame($(beginTab).attr("href"), $(beginTab).attr("rel"));
// Does something everytime you click the tab
$("a.tabref").click(function () {
//event code
});
//Load the actual iFrame
function loadTabFrame(tab, url) {
if ($(tab).find("iframe").length == 0) {
var html = [];
html.push('<div class="tabIframeWrapper">');
html.push('<iframe id="'+ url +'" class="iframetab" src="' + url + '">Load Failed?</iframe>');
html.push('</div>');
$(tab).append(html.join(""));
//$(tab).find("iframe").height($(window).height() - 80); // Set the height of the iFrame (Currently using CSS - See controlStyle.css iFrame)
}
return false;
}
//Make sure its only loaded on click
$("a.tabref").click(function () {
loadTabFrame($(this).attr("href"), $(this).attr("rel"));
});
// -- IFRAME TABS
どのthelがページをiFrameにロードしますか。
iFrameの3つのコンテンツを編集(申し訳ありません)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GeneralInformationPrivate.cs" Inherits="member.Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>General Information</title>
</head>
<body style="background: white">
<form id="form1" runat="server">
<div style="min-height: 100px; width: 100%; padding: 0px" id="divProInfo">
<table style="width: 100%">
<tr>
<td>
<div class="divRegInput" style="padding: 5px 0px 10px 15px">
<asp:Label ID="Label12" runat="server" Text="Image URL" Font-Bold="True"></asp:Label>
<asp:Label ID="Label13" runat="server" Text="make yourself look good" CssClass="styleLabelWatermarkWashout"></asp:Label>
<br />
<input id="imageLoc" class="styleTextBoxCenter Larger" />
</div>
</td>
</tr>
<tr>
<td>
<div class="divRegInput" style="padding: 5px 0px 10px 15px">
<asp:Label ID="Label6" runat="server" Text="Website URL" Font-Bold="True"></asp:Label>
<asp:Label ID="Label7" runat="server" Text="show others where you came from" CssClass="styleLabelWatermarkWashout"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server" CssClass="styleTextBoxCenter Larger" />
<asp:Label ID="lblWebsiteTitle" runat="server" CssClass="styleLabelWatermark"></asp:Label>
</div>
</td>
</tr>
<%--<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="styleButtonGreenHolder" Height="43px" CausesValidation="False" OnClick="btnChangeChallenge_Click" Width="195px" />
</td>
</tr>--%>
</table>
</div>
</div>
</form>
</body>
</html>